Clip-path Generator

Draw a clip-path with draggable points on a live preview and copy the CSS — entirely on this device.

0 bytes uploaded

Shape

Reference box

Fill rule

nonzeroevenodd

Points

Point 1
Point 2
Point 3
Point 4
Point 5
Point 6

TopRightBottomLeftCorner radius

Radius

Center XCenter Y

Radius X

Radius Y

Center XCenter Y

Preview

Backdrop

SoftGridScene

Drag a point, or set X and Y in the Points list.

CSS output

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

73 B

Add -webkit- prefix

Presets

Import

Paste a clip-path value

Press ? for shortcuts

Do it offline:$ printf '%s\n' 'clip-path: polygon(50% 0%, 0% 100%, 100% 100%);' >> component.css

How to use it

Choose a shape tab — polygon, inset, circle or ellipse — and the preview reshapes while only that shape's controls show.
On a polygon, drag the numbered handles or type each point's X and Y percentage; arrow keys nudge by one, Shift+arrow by ten, points run from three up to 24, and the non-zero or even-odd fill rule sits above the list.
For inset, circle or ellipse, set the offsets, radius and centre instead.
Paste a clip-path value to turn it back into editable geometry; an unreadable token is named beside a Jump-to-error button.
Copy the declaration, download a .css file, share the shape as a link, or load a preset chip.

Build a CSS clip-path by dragging points across a live preview, or set each one by exact X and Y percentage. Switch between polygon, inset, circle and ellipse, drop in a shape preset, or paste a value you already have to turn it back into editable points. The output stays canonical, ready to copy, download or share, and the editor uploads nothing.

How it works

A clip-path value is one `<basic-shape>` function. polygon() lists X Y point pairs; inset() takes one to four edge offsets with an optional round radius; circle() and ellipse() take a radius or two, then a centre after the keyword at. Every coordinate is a percentage read per axis — X against the box width, Y against its height — so 50% 50% is the centre at any proportion. The print is canonical: the default non-zero fill rule is omitted and only even-odd is written, repeated inset offsets collapse margin-style, and at is always emitted.

The browser is the engine here: a drag handle maps your pointer onto an X and Y percentage, and those exact numbers are what get written into the polygon() you copy — so the shape on screen and the CSS on your clipboard are the same string, byte for byte. Nothing is traced from a screenshot; the preview element simply wears the clip-path you are about to take.

Examples

Default hexagon — the shape the editor opens on

polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)

Six points, non-zero fill, so no fill-rule keyword prints. The page opens on this hexagon, never a blank box.

Inset — 10% vertical, 20% horizontal, 8% corner round

inset(10% 20% round 8%)

Equal top and bottom and equal sides collapse the four offsets to two; the single uniform round radius follows the round keyword.

Circle — radius 40% centred at 50% 50%

circle(40% at 50% 50%)

A percentage radius resolves against the box's diagonal over root-two, and the centre is written after at even when it sits dead centre.

polygon(evenodd, 50% 0%, 21% 90%, 98% 35%, 2% 35%, 79% 90%)

polygon(evenodd, 50% 0%, 21% 90%, 98% 35%, 2% 35%, 79% 90%)

A self-intersecting paste round-trips unchanged: even-odd stays because it carves the overlapped centre into a hollow star, and the five points import as draggable handles.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

A polygon can't drop below three points

Remove is disabled once three handles remain, since fewer cannot enclose an area, and a two-point paste is turned down rather than repaired.

Even-odd only changes self-intersecting shapes

On a simple convex outline non-zero and even-odd paint the same pixels; the rule only bites where edges cross, hollowing the overlap into a hole.

Only percentages are accepted — px, calc() and var() are refused

Points are placed by percentage, so a 20px length, a calc() or a var() is refused by name; a bare 0 is the one exception, read as 0%.

clip-path clips painting, not layout

The element keeps its full box, so neighbours, scrollbars and overflow behave as if nothing were clipped — only the painted pixels are masked.

-webkit-clip-path is a legacy extra

The unprefixed property is Baseline widely available, so the prefixed duplicate stays off by default; enable it only when you still target very old WebKit.

Common errors

path("M0 0 L100 100") is not a shape this tool edits — use polygon(), inset(), circle() or ellipse().: path() and url() point at SVG geometry this editor has no handles for, so the paste is named and refused; rebuild the outline as one of the four basic shapes.
polygon() needs at least 3 points — this value has 2.: Two points describe a line, not a fillable area; the count the parser saw is quoted so the shortfall is clear.
`20px` uses a length — this editor places points by percentage; use a value like `25%`.: A pixel offset only means something against a rendered box size the editor never assumes, so the token is named, not converted.
inset() takes 1 to 4 offsets before `round` — this value has 5.: The offsets follow the margin shorthand of one to four values; a fifth breaks it, and the round radius is counted separately after the round keyword.
Input is larger than the 16 KB (16,384 characters) import limit for this tool.: A clip-path value is tiny, so a paste past 16,384 characters is refused whole rather than parsed; the import banner adds this page's CLI line.

FAQ

Why can I only enter percentages, not pixels?

A clip-path point is positioned inside the element's own box, and a percentage is the only unit that stays correct as that box resizes. A pixel value would need a fixed rendered size the editor cannot know, so lengths are refused by name instead of guessed.

What does the even-odd fill rule actually change?

Only self-crossing polygons. Non-zero fills everything the outline encloses; even-odd counts crossings, so overlapped regions cancel to holes. A pentagram under even-odd shows a hollow star centre, while non-zero fills it solid.

Do I still need -webkit-clip-path?

For current browsers, no — the unprefixed clip-path with basic shapes is Baseline widely available. The optional -webkit-clip-path duplicate is there only for very old WebKit and Safari, and it is off by default.

Keyboard shortcuts

⌘/Ctrl + C: Copy the clip-path value when nothing is selected; a focused field keeps its own copy.
⌘/Ctrl + Shift + C: Copy the value no matter what is selected.
⌘/Ctrl + S: Save the shape as a .css download instead of the browser's save-page dialog.
t: Change the theme unless a field is focused.
? or ⌘/Ctrl + /: List every shortcut in an overlay.
Esc: Dismiss the topmost dialog; the shape is left untouched.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

MDN — clip-path · W3C CSS Shapes Module Level 1 — basic shape functions · W3C CSS Masking Module Level 1 — the clip-path property · Can I use — CSS clip-path property (basic shapes, Baseline)

Last reviewed: 2026-08-10