CSS Clip Path Generator
Pick a shape — triangle, hexagon, star, arrow, chevron and more — and copy the clip-path CSS with one click.
polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)CSS generated is free to use — no attribution required.
What is CSS clip-path?
The clip-path property clips (masks) an element to a specific shape. Everything outside the shape becomes invisible. The most versatile value is polygon(), which accepts a list of x/y coordinate pairs as percentages.
What is the CSS clip-path syntax?
clip-path: polygon(x1 y1, x2 y2, ...). Coordinates are percentages of the element's bounding box. clip-path: circle(50%) clips to a circle. clip-path: ellipse(50% 30%) clips to an ellipse.
What are the common clip-path polygon shapes?
Triangle: polygon(50% 0%, 0% 100%, 100% 100%). Star: 10-point polygon with alternating inner/outer radii. Hexagon: 6-point polygon. Each is available as a preset in this generator.
How do you animate clip-path in CSS?
CSS can animate between two clip-path: polygon() values as long as they have the same number of points. Use transition: clip-path 0.3s ease for smooth morphing effects on hover.