CSS Clip-Path Generator

Examples you can reproduce

A slanted hero section. Click the Diamond preset to get four vertices, then type these points in the vertex list: top-left, top-right, 85% down the right edge, and bottom-left. The tool generates:

.element {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

Because every point is a percentage, the slope scales with the section’s width and height.

A circle on a wide banner. Select Circle, keep the radius at 50%, and set the ratio to 2:1. The value is circle(50% at 50% 50%), but the dashed outline is wider than the banner is tall. CSS Shapes Level 1 resolves a percentage radius against the reference box, using the box’s direction-agnostic size: the diagonal divided by √2. For a 400 × 200 element that gives:

A radius of 158.11px, so the top and bottom of the circle are cut by the element’s own edges. Use ellipse() if the shape must touch all four sides.

Fine positioning. For a 300px preview, dragging the top vertex of a triangle 7px right and 3px down produces:

The vertex is now 52.33% 1%. The tool keeps two decimals instead of rounding to whole percentages.

CSS values the handles do not cover

The CSS value tab accepts any basic shape or reference box and previews it with CSS.supports('clip-path', value) in your browser. Examples in the menu include path("M 20 20 H 180 V 120 H 20 Z"), shape(from 50% 0%, line to 100% 100%, line to 0% 100%, close) and inset(10% round 16px) content-box. Values in path() are CSS pixels, so they do not scale with the element; shape() accepts percentages.

A shape without a box keyword uses the border box. The CSS Masking specification also lets you add padding-box, content-box or margin-box. Tick Show reference boxes to give the preview a 12px border and 16px padding. Dashed lines then mark the border, padding and content boxes, so you can see which edge the shape follows.

url(), var(), env(), comments and escaped characters are rejected. They depend on the page that uses them, so a preview here could be wrong. A value with an unclosed bracket or quote is rejected as well. In Chromium, CSS.supports('clip-path', 'polygon(50% 0%, 100% 100%') returns true because the parser closes the bracket at the end of the input, but the same text breaks the rule when pasted into a stylesheet. Raw values are previewed only; they are not converted into handles. When a value is refused, the status line says why and where: circle(50%)) gives “Character 12: “)” has no matching “(”.”, and polygon(0 0, 100% 0, 50%) gives “polygon() point 3 has 1 value(s). Each point is “x y”; separate points with commas.” A misspelled function name gets a suggestion (polgon() → polygon()).

Animating clip-path

CSS Shapes Level 1 interpolates two basic shapes only when they use the same function. For polygon() both values must have the same number of vertices and the same fill rule. The built-in presets have different vertex counts (diamond 4, hexagon 6, star 10), so a transition from the diamond to the hexagon jumps instead of morphing. Add vertices until both lists match, then pair the values with an easing from the Cubic Bezier Generator.

How this differs from other clip-path generators

We tested four popular generators on October 3, 2026: Clippy by Bennett Feely, CSS clip-path generator by 365 Tools, ZERONOVA LAB and ToolBada. In Clippy, 365 Tools and ZERONOVA LAB, dragging the top vertex 7px right and 3px down produced 52% 1% or 53% 1%; they round to whole percentages. Their handles are div elements with no tab stop, so they cannot be moved with the keyboard. ToolBada edits vertices in a text area and has no drag handles.

None of the four accepted path(), shape(), rect(), xywh() or a reference box. Clippy lists 27 shape options and ZERONOVA LAB 18 presets, compared with 5 presets here. Choose this tool when you need decimal points, keyboard editing or a raw CSS value checked by your own browser.

Limits

• Handle modes accept 0–100%. To place a vertex outside the element, type it on the CSS value tab.
• If two opposite inset offsets add up to more than 100%, they are reduced in proportion until they add up to exactly 100%, and the shape has no area (see the example below).
• The inset corner radius is a single percentage. Type elliptical or pixel radii on the CSS value tab.
• Browser support decides what the CSS value tab accepts. MDN compatibility data 8.1.4 lists shape() from Chrome 135, Firefox 148 and Safari 18.4, and rect() and xywh() from Chrome 119, Firefox 122 and Safari 17.2.
• Clipping hides the element’s shadow and focus outline outside the shape. Clicks outside the shape do not reach the element, because clipping affects hit testing.

An inset with 70% top and 50% bottom on a 400 × 200 element becomes 58.33% / 41.67% / 0px: the reduced top offset, the reduced bottom offset and the height that is left. Nothing is painted.

For triangles that must work without clip-path, the CSS Triangle Generator uses borders instead.