Clip Path Generator
Design complex CSS clip-paths visually.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Click and drag handles to reshape
- Use presets for quick shapes
- Try 'polygon' mode for custom forms
Recommended Tools
Hand-picked utilities you might find useful
Cutting Custom Shapes with CSS clip-path
Overview
The CSS clip-path property lets you crop an element into a custom shape — a triangle, hexagon, arrow, blob, or any polygon — without editing images. It's a powerful way to add non-rectangular design without extra files. Because writing the coordinates by hand is fiddly, this clip-path generator lets you drag points visually and copies the exact CSS, all in your browser.
How to Use (Step by Step)
- 1
Choose or draw a shape
Start from a preset (triangle, hexagon, circle) or place points to define a custom polygon.
- 2
Drag the points
Move the corners in the live preview until the shape looks right.
- 3
Copy the clip-path CSS
Paste the generated clip-path value onto your element to crop it to that shape.
How It Works
You choose or draw a shape, and the tool defines it with clip-path — usually a polygon() of percentage coordinates, or a preset like circle() or ellipse(). Everything outside the shape becomes transparent, so the element shows through only within the outline. You drag the points in a live preview and the tool writes the matching clip-path value for you to paste onto any element.
When to Use This
Cropping an image or section into an angled or geometric shape. Creating a diagonal divider between page sections. Making a hexagon avatar or badge. Adding an arrow or speech-bubble shape to a callout. Designing a non-rectangular hero or card. Learning how polygon coordinates map to a visible shape.
Frequently Asked Questions
It's clipped away — made fully transparent and non-interactive, so clicks pass through it. The element only shows and responds within the shape's outline; the underlying layout box still occupies its original space.
Important Notes
clip-path crops visually but the element's box still takes its full rectangular space in layout, which can cause overlap or spacing surprises. Also, clipped content is hidden, not removed — don't rely on it to hide sensitive information.