CSS Clip Path

Generate a clip-path value from a preset, a slider or your own coordinates, and see the shape before you copy it.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

CSS Clip Path produces a single CSS declaration — clip-path followed by one basic shape — and renders it against a square preview so the shape is visible before it reaches a stylesheet. Fifteen polygon presets are built in, from triangle, trapezoid, parallelogram and rhombus through the pentagon-to-octagon set to star, cross, message, frame, bevel, arrow-right and chevron-right, each held as a list of percentage points. Circle, ellipse and inset are built from sliders instead: a radius and a centre for a circle, two radii and that same centre for an ellipse, and a single inset from every edge with optional corner rounding.

The input box is optional, and when it holds anything it overrides the shape dropdown. Two formats are accepted. One point per line, written as "50 0", gives a polygon — bare numbers are read as percentages, px, em and rem are kept as written, and three points is the minimum. Alternatively paste a whole value, with or without the clip-path prefix, and it is parsed back: a polygon keeps an evenodd or nonzero fill rule if it carries one, while a pasted circle, ellipse, inset or path value has its whitespace tidied rather than its arguments checked. That round trip is how a preset gets adjusted — run it, paste the polygon back, edit the numbers.

A few things are worth knowing before the value lands in your CSS. Percentages resolve against the element's own box, so a star that sits evenly in the square preview will lean or flatten on a wide banner. And clip-path clips painting only: it changes no layout, text does not wrap around the shape — that is shape-outside — and whatever is clipped away stops receiving clicks and hovers. The preview colour is a preview only: it fills the clipped square as a two-stop gradient so the outline stays readable, and neither the colour nor the 240px box appears in the declaration, which is the clip-path line and nothing more. No -webkit- prefix is written either. There is no file involved at any stage — the declaration is assembled inside this browser tab from the controls and the text box, so no request leaves it.

How to use it

  1. Choose a shape, or type nothing at all. The tool runs from its settings alone. Pick one of the eighteen entries in the Shape list and the sliders change to match: radius and centre for a circle, two radii plus a centre for an ellipse, an edge inset with optional rounding for inset.
  2. Or give it your own points. Type one "x y" pair per line — 50 0, then 100 38, and so on. Bare numbers become percentages, and a polygon of fewer than three lines is refused rather than quietly padded.
  3. Paste an existing clip-path to read it. A value copied out of somebody's stylesheet is re-parsed and previewed, so you can see what an inherited shape actually is and change the coordinates by hand.
  4. Press Run, then copy the declaration. The preview redraws and the CSS appears beneath it. Nothing recalculates while a slider moves — Run is what applies the settings as they currently stand.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Angled section dividers

A trapezoid or triangle clipped onto a full-width band gives a diagonal edge between two sections, with no background image to export and keep in sync.

Hexagon avatars in a team grid

The hexagon preset applied to square portraits gives every face the same silhouette, and it stays sharp at any size because the shape is geometry rather than a PNG.

Breadcrumbs and step indicators

arrow-right and chevron-right turn plain list items into the interlocking arrow steps used for checkout progress and process bars.

Working out what an inherited shape does

Paste the polygon from a stylesheet you did not write, press Run, and the preview draws the outline that its list of coordinates was describing.

Questions

Is anything uploaded?
No. There is no file to send: the declaration is assembled from the dropdown, the sliders and the text box by the page's own JavaScript, and the tool behaves identically with the network switched off.
Is the preview gradient part of the value I copy?
No. The output is one clip-path declaration. That gradient is the fill of the clipped square, picked so the outline reads against the page, and neither it nor the square's 240px size is written into the code.
Can I drag the points around?
Not here — coordinates are typed or taken from a preset rather than dragged. The working substitute is the round trip: run a preset, paste the polygon it produced back into the input, and move the numbers a few percent at a time.
Why does my star look stretched on the page?
Percentage coordinates are measured against the element's own box, not against a square. A polygon that is symmetrical in the preview will lean or flatten on a wide element, so give that element a fixed aspect ratio or switch the coordinates to px.
Do I need the -webkit-clip-path prefix?
The declaration is written unprefixed, which is what current browsers expect. If you still support very old WebKit builds, duplicate the line with -webkit-clip-path yourself — nothing here adds it for you.
Is a clip path the same thing as a mask?
No. clip-path cuts a hard geometric edge and every pixel is either kept or gone. A mask shape uses an image's alpha channel and can fade out, so when you want a soft edge the property you need is mask-image, not this one.
Which units are accepted in the point list?
Numbers on their own are treated as percentages, and px, em and rem are passed through unchanged. Anything else — vw, vh, or a calc() expression — is rejected with the line number, so those have to be written by hand.

Related tools