Build a CSS 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 CSS Clip Path Generator?
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 CSS Clip Path Generator?
- Click a shape chip.
- Preview the result on the swatch.
- Copy the CSS clip-path value.
When should I use CSS Clip Path Generator?
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.
Frequently asked questions
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.
Tools that pair well with CSS Clip Path Generator
- CSS Border Radius Generator shape any corner, free and in your browser.
- CSS Box Shadow Generator visual shadow editor, free and in your browser.
- CSS Gradient Generator design css gradients, free and in your browser.
- Image Cropper crop to any aspect ratio, free and in your browser.