CSS Clip Path Generator
Drag the handles to shape a polygon, or switch to circle, ellipse, or inset. Copy the CSS with one click.
Presets
Points
1 X Y
2 X Y
3 X Y
Preview — drag the handles
CSS Output
.element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}How it works
- 1 Select a shape type — Polygon, Circle, Ellipse, or Inset — using the tabs.
- 2 For polygons, drag the handles directly on the preview or pick a preset shape to start from.
- 3 Adjust sliders or point inputs to fine-tune your shape in real time.
- 4 Click Copy to grab the clip-path CSS and paste it into your stylesheet.
Why use this tool
- ✓ Visual drag interface — no mental maths for polygon coordinates.
- ✓ 8 built-in presets to start from common shapes instantly.
- ✓ Supports all four CSS clip-path shape types in one place.
- ✓ Live preview updates as you drag — what you see is what you get.
Use cases
- → Creating diagonal section dividers on landing pages.
- → Clipping hero images or avatars into custom shapes.
- → Animating clip-path between two polygon states.
- → Generating inset shapes with rounded corners for cards.
Related tools
{ } 🖼 🔑 📝 📤
JSON Formatter
Format CSS config and design token JSON files.
Image Compressor
Optimise images you plan to clip with this generator.
UUID Generator
Generate unique IDs for styled elements in your project.
Word Counter
Count characters in CSS values and style declarations.
File Sender
Share your CSS or design files with teammates.