CSS Clip Path Generator

Press Generate and the CSS Clip Path Generator hands you one ready-to-use clip-path value, such as polygon(50% 0%, 0% 100%, 100% 100%), and draws it on a 200 by 200 pixel box so you can see the shape. A color picker lets you change the fill of the preview. Every value uses percentages, so the same shape works on a 40px icon or a full-width hero section. It's a quick reference for developers who know they want "a hexagon" or "a chevron" but don't want to work out the vertex math.

What's in the shape library

The tool draws from 24 shapes. Twenty-three are polygons: Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon, Hexagon, Heptagon, Octagon, Nonagon, Decagon, Bevel, Rabbet, Left arrow, Right arrow, Left point, Right point, Left chevron, Right chevron, Star, Cross, Message (a speech bubble), Close (an X) and Frame (a square with a square hole). The 24th is an ellipse, written as ellipse(25% 40% at 50% 50%). The generator won't return the same shape twice in a row.

This is a random picker, not an editor. You can't drag vertices, type your own coordinates or pick a shape by name. If you need a specific one, click until it appears (a few clicks is usually enough), then copy the text below the preview. If you need to fine-tune a vertex, paste the value into your stylesheet and adjust the numbers there.

Sample values it produces

How to use the output

Apply the value to any element with a visible background or content. The clipped-away area becomes transparent and stops receiving pointer events, so a clipped button only responds to clicks inside the shape.

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

Percentages are relative to the element's own box, which is why a triangle stays a triangle when the element resizes. If you want a hard-edged shape on an image, clip the img itself; if you want text to sit inside the shape, clip a wrapper and give it padding so the letters don't get cut off at the vertices.

Common uses

• Angled section dividers. A trapezoid or parallelogram on a full-width band gives you a slanted edge without an SVG divider.
• Avatar and badge masks. Hexagon and octagon clips on profile pictures, with the ellipse for a softer look.
• Directional UI. The arrow, point and chevron shapes make breadcrumb steps and "next" buttons without extra markup.
• Hover reveals. Animate between two polygons with the same number of vertices (say, Rabbet to Frame) using transition: clip-path 300ms.
• Placeholder art in prototypes. Random shapes in random colors make convincing filler for a wireframe.

Clip-path basics worth knowing

The clip-path property accepts four basic shape functions: inset(), circle(), ellipse() and polygon(), plus path() for SVG path data and a url() reference to an SVG clipPath element. This generator only outputs polygon() and ellipse(). Polygon points are listed as x y pairs, and the shape closes itself back to the first point; you can add evenodd as the first argument to cut holes where a path crosses itself. Basic shapes have shipped unprefixed in all current browsers since Safari 13.1 in 2020, so a -webkit- fallback is only needed for very old iOS. clip-path is animatable as long as both values are the same function with the same number of points, which is why the polygons here are useful in pairs.

If you're setting up test data alongside a layout, the Random String Generator and Random Email Generator fill placeholder fields, and the Random QR Code Generator gives you an image to clip. Other utilities are under all developer & test data tools.