CSS Generator

Clip Path Generator

Drag polygon vertices, switch between clip-path functions, and copy CSS or Tailwind arbitrary values.

clip-path

Editable Shape

Vertex editor

6 points

Controls

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Tailwind v4

[clip-path:polygon(25%_0%\,_75%_0%\,_100%_50%\,_75%_100%\,_25%_100%\,_0%_50%)]

Presets

Popular Clip Path Presets

Pick a geometric shape, then drag the points into a custom CSS cut.

More tools

Continue building CSS effects

Open Gallery