CSS Clip-Path Generator

clip-path cuts an element — an image, a card, a button — into a shape: everything outside the shape is hidden, including the background and hover area. This generator writes clip-path values for 16 ready shapes (triangles, polygons, stars, crosses, arrows, chevrons, message bubbles, circle(), ellipse() and rounded inset()) with adjustable proportions and direction, or checks your own polygon. The preview numbers each point so you can see the order.

How to use this tool

1. Choose a shape.
2. Adjust its amount (slant, inner radius, arm width…), the number of points or the direction.
3. Or choose Custom polygon and type one "x y" point per line.
4. Copy the CSS; both the -webkit- and standard lines are included.

Formula

clip-path: polygon(x₁ y₁, x₂ y₂, …) · circle(r at cx cy) · ellipse(rx ry at cx cy) · inset(d round r)

Polygon coordinates are measured from the element's top-left corner: x as a percentage of its width, y of its height. Regular polygons and stars are computed from evenly spaced angles and stretched to fill the box.

Example

The hexagon uses six corners 60° apart with flat top and bottom, stretched to the box: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). A regular octagon cuts each corner at 1 ÷ (2 + √2) = 29.29% of the side. A 4-point star with a 50% inner radius has its inner corners at 50 ± 17.68%, i.e. 32.32% and 67.68%.