The CSS clip-path generator creates clip-path values that crop any element into a polygon, circle, ellipse, or custom shape. It's how modern landing pages get those slanted hero sections, hexagonal avatars, and arrow-shaped buttons — all without exporting masks from Photoshop.
This guide covers each clip-path function, browser support, and how to animate clipped shapes for hover effects.
Generate Clip-Path CSS — Free
Polygons, circles, ellipses with live preview. One-click copy.
Clip-Path Functions
| Function | Use For |
|---|---|
| polygon() | Any custom shape via x/y points |
| circle() | Circular crop with radius |
| ellipse() | Oval shapes |
| inset() | Rectangular crop with optional rounded corners |
| path() | SVG-style path data for complex curves |
| shape() | New (CSS Shapes 2) — declarative shape commands |
Common Clip-Path Recipes
Diagonal hero
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);Hexagon
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);Arrow
clip-path: polygon(0 25%, 75% 25%, 75% 0%, 100% 50%, 75% 100%, 75% 75%, 0 75%);Circle
clip-path: circle(50% at 50% 50%);Rounded rectangle inset
clip-path: inset(10px round 12px);Animating Clip-Path
You can transition or animate clip-path for reveal effects. The trick is that both states must have the same number of points:
.box {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.box:hover {
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}For more complex morphs, use path() with the same command sequence in both keyframes.
Browser Support
- Chrome, Edge, Safari, Firefox — Full support for polygon, circle, ellipse, inset.
- path() — Supported in all modern browsers since 2022.
- shape() — Newer; check support before using in production.
- IE11 — Not supported. Use SVG masks as fallback.
Common Gotchas
- The clipped area is still laid out — surrounding elements behave as if the original box is intact. Use
shape-outsidefor text wrapping. - Click events still fire on the invisible clipped portion. Use
pointer-events: noneon cut areas if needed. - Box-shadow gets clipped too. Wrap the element in a parent and apply the shadow there.
- Background images may render outside the clip on some Safari versions — test on iOS.
How to Use the Tool (Step by Step)
- 1
Pick Shape Type
Polygon, circle, ellipse, or inset.
- 2
Adjust Points / Radius
Drag handles or slide sliders.
- 3
Preview Live
See the clipped element update.
- 4
Copy CSS
Grab the generated rule.
- 5
Apply to Element
Paste into any element's CSS.
Frequently Asked Questions
Does clip-path work with images?+−
Yes — apply it to any element, including <img>. The image gets cropped to the shape.
Can I animate between different polygons?+−
Yes, but both polygons must have the same number of points for smooth interpolation.
Will the clipped element still receive clicks?+−
Yes — clip-path is visual only. Pointer events still fire on the original box. Add pointer-events: none if needed.
How is clip-path different from mask?+−
clip-path uses sharp shape boundaries. mask uses an image (with alpha) for soft, gradient masking.
Can clip-path use percentages?+−
Yes — percentages, px, em, or any CSS length. Percentages scale with element size.
Generate Clip-Path CSS — Free
Polygons, circles, ellipses with live preview. One-click copy.
Open Clip-Path Generator ->Related Guides
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.
CSS Animation Generator Guide
Build CSS keyframe animations with a visual editor — set timing, easing, transforms, and preview in real-time without writing code from scratch.
CSS Flexbox Generator Guide
Build CSS Flexbox layouts visually. Understand flex-direction, justify-content, align-items, flex-wrap, gap, and responsive patterns with live preview.