Free tool No sign-up
CSS Clip-Path Generator
Design any CSS clip-path visually — drag polygon vertices, pick from triangle to star presets, switch between polygon/circle/ellipse/inset, and copy the CSS instantly.
clip-pathcssgeneratorshapespolygon
Why use clip-path?
Crop without extra elements
clip-path turns any rectangular box into an arbitrary shape — no SVG masks, no positioned overlays, no extra DOM. The element's layout, click area, and box model stay rectangular while only the visible region changes.
Distinctive page design
Diagonal section dividers, hexagonal avatars, ticket-style cards, chevron call-to-actions — clip-path is how modern sites get their shape language without resorting to background images.
Animatable & interactive
Polygons of the same vertex count interpolate cleanly. Animate clip-path on hover or scroll to reveal content, build accordion masks, or create dramatic page transitions — all GPU-accelerated.
Zero asset cost
No exported SVG, no PNG mask, no extra request. The shape lives in CSS as a few percentage values, scales perfectly, and adapts to any element size.
How to use this generator
01
Pick a shape type
polygon() for arbitrary multi-point shapes, circle() / ellipse() for rounded crops, inset() for rectangular cut-ins (with optional rounded corners).
02
Tweak in the preview
For polygons, drag the violet handles directly on the preview to reshape the path. Double-click a handle to remove a vertex; click + next to a vertex in the sidebar to insert a midpoint.
03
Try a preset
Triangle, hexagon, star, chevron, message bubble, ticket — each preset is a starting point. Tweak the vertices to suit your layout, swap the preview background to test against real content.
04
Copy the CSS
The output panel keeps the latest declaration ready to copy. Paste it onto any element — clip-path works on images, divs, sections, even full-bleed hero blocks.
clip-path function reference
| Function | Signature | Note |
|---|---|---|
polygon() | polygon(x1 y1, x2 y2, …) | Any shape from 3+ points |
circle() | circle(r at cx cy) | Pure circle crop |
ellipse() | ellipse(rx ry at cx cy) | Stretchable circle |
inset() | inset(top right bottom left round radius) | Rounded-rect cut-in |
path() | path("M0 0 L100 0 …") | SVG path data — any curve |
rect() | rect(top right bottom left round radius) | New CSS Shapes module |
xywh() | xywh(x y w h round radius) | Position + size shorthand |
clip-path patterns
Polygon
/* Pentagon — 5 percentage-based vertices */
.card {
clip-path: polygon(
50% 0%,
100% 38%,
82% 100%,
18% 100%,
0% 38%
);
} Hover
/* Reveal a hidden corner on hover */
.box {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 400ms ease;
}
.box:hover {
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
} Shapes
/* Rounded inset for ticket-style cards */
.ticket {
clip-path: inset(0 0 0 0 round 12px);
}
/* Circle avatars — no border-radius needed */
.avatar { clip-path: circle(50% at 50% 50%); } Pro tips
01
Match vertex counts to animate
Browsers can only smoothly tween polygon() with the same number of vertices. To morph between shapes, give both states the same point count — even if some points overlap visually.
02
Mind clipped click areas
Clipped regions still receive pointer events. If you clip a button into a triangle but want clicks only inside the visible shape, also set clip-path on a positioned overlay or use SVG with proper hit-testing.
03
Use Safari's -webkit- prefix sparingly
Modern Safari (15+) supports unprefixed clip-path. The -webkit-clip-path fallback is only needed for very old iOS — most generators (including this one) emit both for safety.
04
Avoid clipping focus outlines
Clipping the focus ring on form controls or links breaks accessibility. Don't apply clip-path to focusable elements — clip a wrapper or background layer instead.