CSS clip-path
The clip-path property cuts an element into a shape. Everything outside the shape becomes invisible. Pick a value below to see it live, or type your own.
LIVEPreview
CSSCode
The clip-path property cuts an element into a shape. Everything outside the shape becomes invisible. Pick a value below to see it live, or type your own.
clip-path: none | circle() | ellipse() | inset() | polygon() | path() | url();
| Function | Example | Result |
|---|---|---|
circle() | circle(50% at center) | A circle with a radius and center point |
ellipse() | ellipse(50% 35%) | An oval with two radii |
inset() | inset(10% round 20px) | A rectangle cut in from each side, optionally rounded |
polygon() | polygon(50% 0, 100% 100%, 0 100%) | Any shape from a list of x y points |
path() | path("M0 0 L100 0…") | An SVG path, for curves |
Each point is an x y pair measured from the top-left corner. 0% 0% is the top-left, 100% 100% the bottom-right. The triangle polygon(50% 0%, 100% 100%, 0% 100%) goes top-center, bottom-right, bottom-left. Plotting points by hand is tedious, so the Clip Path Generator lets you drag them instead.
You can transition between two shapes when they use the same function and the same number of points:
.badge {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: clip-path 0.4s ease;
}
.badge:hover {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
Note that clipped-away areas are also not clickable, and box shadows outside the shape are cut off. Use filter: drop-shadow() on a parent element if you need a shadow around the shape.
Both shapes must use the same function with the same number of points. Animating from a 3-point polygon to a 6-point polygon will jump.
Shadows are clipped too. Wrap the element and put filter: drop-shadow() on the wrapper.
Basic shapes and polygon work in all current browsers. path() is supported in current Chrome, Firefox and Safari.