Clip Path
Visual clip-path editor
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path to mask any element. Animating between shapes works best when both have the same number of points.What is Clip Path?
Pick from 11 ready-made clip-path shapes — triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, star, arrow, circle, ellipse, and inset-with-rounded-corners — with a live preview on a coloured swatch. Copy the CSS and drop it into your stylesheet to mask any element to the chosen shape.
How do I use Clip Path?
- Click a shape chip.
- Preview the result on the swatch.
- Copy the CSS clip-path value.
When should I use Clip Path?
Clip Path masks elements into shapes. For softer rounded corners specifically, Border Radius is simpler. For free-form custom polygons, edit the generated value in code — the tool ships common presets only.
What can I do with clip-path?
Cut an HTML element into any polygon, circle, or ellipse. Used for angled hero banners, speech bubbles, avatars, and image masks — purely in CSS, no images needed.
Can I drag points to build my own shape?
Yes. The polygon editor lets you add, drag, and delete points on a live preview. Output is a polygon(...) CSS value you can paste in directly.
Does it work in every browser?
Modern browsers support clip-path fully. Older versions of Safari need the -webkit- prefix — the generated output includes both when needed.
Is my file uploaded anywhere?
No. Everything runs in your browser. Your files never leave your device, and there is no server component for this tool.