CSS clip-path generator
Pick a shape preset or drag points directly on the preview canvas — the live preview updates immediately and ready-made clip-path CSS code appears below.
.shape {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}How to use it
- Select a shape preset (triangle, chevron, trapezoid, beveled corners, arrow, star) or start a custom polygon.
- Drag the handle points on the live preview canvas. Percentage coordinates update in real time.
- Switch between Polygon, Circle, Ellipse, and Inset modes, and adjust radii or offsets as needed.
- Toggle the preview background (gradient, photo, dark, light) to test transparency, then click “Copy”.
How it works
What is clip-path and how does it work?
The clip-path CSS property creates a clipping region that sets what part of an element is visible. Anything outside the region is hidden and does not receive pointer events. Unlike the obsolete clip property, clip-path supports rich geometric shapes and does not require position: absolute.
.element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}polygon() syntax and coordinate space
polygon(x1 y1, x2 y2, ...) takes a comma-separated list of coordinate pairs. Coordinates run from the top-left corner (0% 0%) to the bottom-right corner (100% 100%). Points are ordered clockwise. Length units such as px, rem, or calc() can also be used instead of percentages.
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);circle(), ellipse() and inset()
circle(radius at x y) creates a circular mask centered at a specified point. ellipse(rx ry at x y) allows different horizontal and vertical radii. inset(top right bottom left round radius) cuts into the element from its edges and supports rounded corners via the round keyword.
clip-path: circle(50% at center);
clip-path: inset(10px 20px round 12px);Animating clip-path
Shapes defined by clip-path can be transitioned with CSS transition or @keyframes as long as both states share the exact same number and type of vertices. For instance, a 4-point rectangle smoothly morphs into a 4-point trapezoid, but cannot directly interpolate into a 5-point star.
.card:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}Shadows and clip-path (box-shadow)
A crucial quirk: clip-path clips out the element's own box-shadow! To cast a shadow around a clipped shape, apply filter: drop-shadow(...) to the element or its container — drop-shadow follows the exact clipped contour.
.card {
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}FAQ
Why does box-shadow disappear with clip-path?
clip-path clips everything outside the path, including the box shadow. Solution: use filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)) instead.
Can clipped areas receive mouse clicks?
No. Everything cut off by clip-path is excluded from hit testing (pointer-events). Clicks pass right through clipped regions to underlying elements.
Is clip-path supported across all browsers?
Yes. Modern versions of Chrome, Edge, Safari, and Firefox support clip-path natively. Vendor prefixes like -webkit-clip-path are only needed for legacy iOS WebKit.
When should I use clip-path versus an SVG?
Use CSS clip-path: polygon(...) for UI components like beveled buttons, banners, and hero section dividers. Use SVG clip-path: url(#id) when you need intricate bezier curves or complex vector illustrations.
