CSS Clip-path Generator
UI ToolsCreate CSS clip-path shapes visually: polygon, circle, ellipse, and inset. Drag control points on live preview to design any clip shape and copy the CSS instantly.
Editor
Live clip-path preview
Shape Colour
#7c3aedClick swatch to change
Polygon Points
10 ptsXY
0
50%
0%
1
61%
35%
2
98%
35%
3
68%
57%
4
79%
91%
5
50%
70%
6
21%
91%
7
32%
57%
8
2%
35%
9
39%
35%
CSS Output
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
About CSS Clip-path Generator
The CSS Clip-Path Generator gives you an interactive canvas to design `clip-path` shapes without hand-calculating coordinate values. Choose between the four main clip-path types — `polygon`, `circle`, `ellipse`, and `inset` — then drag the control points directly on a live preview element. The generator tracks all coordinate changes in real time and outputs the exact `clip-path` CSS value ready to copy into your stylesheet or component.
Features
- ✓Interactive control point dragging on a live preview element
- ✓Supports polygon (unlimited vertices), circle, ellipse, and inset shapes
- ✓Add and remove polygon vertices by clicking the shape boundary
- ✓Coordinates displayed in percentage and pixel units with toggle
- ✓Smooth/Bezier path option for rounded polygon edges
- ✓Preset shapes: arrow, chevron, star, hexagon, rhombus, parallelogram
- ✓Live preview on a sample image or a custom uploaded image
- ✓Copies the complete `clip-path` CSS value with one click
Common Use Cases
- Clip a hero image into a diagonal or angled shape for a modern landing page
- Create a hexagonal avatar frame for a team member profile section
- Design arrow or chevron section dividers using only CSS
- Reveal on-scroll text animations by clip-pathing elements to zero width
- Mask decorative background shapes for layered parallax effects
Frequently Asked Questions
QIs clip-path supported in all browsers?
`clip-path` with the `polygon()`, `circle()`, and `ellipse()` functions is supported in all modern browsers. Safari requires the `-webkit-clip-path` prefix for some older versions.
QWhat is the difference between clip-path and mask?
`clip-path` defines a geometric region that clips the element. `mask` uses an image (often an SVG gradient) for more complex alpha-channel masking. Clip-path is simpler and better supported.
QCan I animate a clip-path shape?
Yes. CSS `transition` and `@keyframes` both work on `clip-path` values of the same type (e.g., two polygons with the same number of points). This enables reveal and morph animations.
QHow do I add more vertices to a polygon?
Click on any edge of the existing polygon outline in the preview canvas to insert a new vertex at that position. Drag it to the desired location.