Clip Path Shapes
12 toolsGenerate CSS clip-path shapes like triangles and hexagons.
Runs in your browser — your files and text stay on your device
Pick one of six ready-made clip-path shapes (triangle, pentagon, hexagon, arrow, message bubble, parallelogram), preview it and copy the polygon() code. Clip-path cuts an element to a shape without extra images, and percentages scale with the element. For a custom shape, edit the copied points by hand.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);How to use this tool
- 1Click a shape preset.
- 2Check the preview, then copy the generated clip-path CSS.
Frequently asked questions
What is clip-path used for?
It cuts an element down to a custom shape — anything outside the shape is hidden while the box model stays untouched.
Is my data sent to a server?
No — everything is rendered locally with CSS.