Clip Path Generator

CSS Shapes

Create custom CSS clip-path shapes visually — drag points and copy code

✂️

TriangleCircleEllipsePentagonHexagonStarArrowCrossDiamondParallelogramTrapezoidMessageFrame

50%, 0%

0%, 100%

100%, 100%

Generated CSS

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

For wider browser support, also include: -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

How to Use

Pick a preset shape from the badges above to start with a template.
Drag the red points on the preview to customize the shape interactively.
For circle, ellipse, and inset shapes, edit the parameters directly in the input field.
Paste an image URL to preview your clip-path on a real image.
Click "Copy" to copy the generated CSS to your clipboard.
Use "Reset Shape" to revert to the original preset coordinates.