CSS Clip-Path Generator
About this generator
Carve arbitrary shapes on any HTML element via CSS — 21 polygon presets (triangle / trapezoid / parallelogram / rhombus / pentagon / hexagon / octagon / 5-point + 6-point stars / arrows / chevrons / message bubble / cross / rabbet / notched / double-arrow) and 4 functional modes (polygon, circle, ellipse, inset with optional border-radius).
Drag-to-edit handles in the live preview let you reshape any polygon by hand — drag a vertex to move it, double-click to remove, or use the + button in the numerical list to insert a new midpoint. Background-aware preview tests your shape against brand gradient / photo / plain / grid surfaces.
Permalink: every adjustment encodes into the URL hash. No login, no watermark, no paywall. Free and MIT-licensed.
Why use clip-path?
How to use this generator
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
/* Pentagon — 5 percentage-based vertices */
.card {
clip-path: polygon(
50% 0%,
100% 38%,
82% 100%,
18% 100%,
0% 38%
);
}/* 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%);
}/* 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
Frequently asked questions
Why use clip-path instead of border-radius or SVG?
border-radius is limited to elliptical corners — anything more complex (triangle, hexagon, star) can't be done. SVG handles arbitrary shapes but requires defining the shape in SVG markup separately from the element. clip-path lets you carve arbitrary shapes directly on any HTML element via CSS — no extra markup, no separate SVG file. The clipped element keeps its event handlers, scrolling, etc.; only its visible region is restricted. Use clip-path when you want a non-rectangular shape on a DIV / IMG / VIDEO without changing your HTML.
Can I animate clip-path?
Yes — and it's one of the most powerful animation surfaces in modern CSS. polygon() animates correctly when source and target have the same number of vertices, in the same order. circle() and ellipse() animate trivially (just interpolate the radius / center). inset() animates side values + radius. Common patterns: hero-section reveals (start with clip-path: inset(100% 0 0 0) and animate to inset(0)), modal entrance flips, image reveal-on-scroll. For polygon morphs between DIFFERENT shapes (triangle → hexagon), both endpoints need the same vertex count — pad the smaller one with duplicate vertices at the same position.
Why does my polygon look wrong on a wide / narrow element?
Percentage-based clip-path coordinates are relative to the element's bounding box, NOT absolute pixels. A triangle defined as polygon(50% 0, 100% 100%, 0 100%) will look different on a 200×200 square vs a 600×200 rectangle — the aspect ratio of the box stretches the shape with it. If you want a shape that holds its proportions regardless of element size, use circle() / ellipse() with fixed-pixel radius, or constrain the element to a fixed aspect-ratio via aspect-ratio: 1 / 1.
How does the drag-to-edit feature work?
Each polygon vertex renders as a violet handle in the live preview. Click and drag to reposition — the clip-path updates in real time and the URL hash encodes the new position. Double-click a handle to remove that vertex (the polygon must have at least 3 vertices). The + button next to a vertex in the numerical list inserts a new midpoint between that vertex and the next one. This is the same interaction model as Bennett Feely's classic clip-path tool — just modernized with URL persistence and a richer preset library.
Browser support for clip-path?
Excellent. polygon() / circle() / ellipse() / inset() shipped in Chrome 55+, Safari 9.1+, Firefox 54+, Edge 79+. The legacy -webkit-clip-path prefix is still emitted in the export for older Safari versions (the difference is now 1-2 minor versions). All modern targets support clip-path without prefix. Two outliers: (1) the path() function with SVG path data is Chrome 88+ / Firefox 97+ / Safari 14.1+ — slightly newer but covered by all evergreen browsers in 2026, (2) animating between clip-path values requires the same shape function on both ends.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
