CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
`clip-path` is the CSS property that lets you cut any DOM element into a non-rectangular shape — useful for image masks, fancy section dividers, decorative cards, custom buttons, and Photoshop-style hover effects. The syntax is short but unforgiving: `circle(r at cx cy)`, `ellipse(rx ry at cx cy)`, `polygon(x1 y1, x2 y2, …)`, and `inset(top right bottom left round r)`. This tool gives you a live preview with three swappable backgrounds (image, solid color, gradient) and the shape parameters as sliders/number inputs. For polygons you can edit each vertex's percentage coordinates, or click anywhere on the preview to add a new point — handy for tracing freehand shapes. Ten preset polygons (triangle, rhombus, pentagon, hexagon, star, arrow, message bubble, parallelogram, trapezoid, plus) cover the cases everyone needs. The output is a clip-path declaration with the matching -webkit-clip-path fallback prefix, ready to paste into any stylesheet.
Tip: click the preview to add a polygon point at that position.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);About clip-path
clip-path supports basic shapes (circle, ellipse, polygon, inset), CSS `path()` with SVG path data, `url(#id)` referencing an inline SVG <clipPath>, and the geometry-box keywords. This tool emits the basic shape form, which is the most widely supported and easiest to maintain. All percentages refer to the element's reference box (default: border-box). The element still occupies its original layout — clipping only affects rendering. For complex curved shapes, draw an SVG <path> and reference it via clip-path: url(#myShape).
How to use
- Pick a shape: circle (one radius + center), ellipse (two radii + center), polygon (3-16 vertices), or inset (rectangle cut from each edge with optional rounded corners).
- Tweak with sliders or number inputs. For polygons, click anywhere on the preview to add a vertex at that position.
- Tap a preset (triangle, hexagon, star, arrow, …) to start from a known shape and edit from there.
- Switch the preview background (image, solid, gradient) to see how your shape will look against real content.
- Copy the CSS — it includes both the modern `clip-path` and the `-webkit-clip-path` fallback for older Safari versions.
Frequently asked questions
- Why does clip-path use percentages?
- Percentages make the shape responsive: a `polygon(50% 0%, 100% 100%, 0% 100%)` triangle stays a triangle whether the element is 100px or 1000px wide. You can also use absolute units like px, em, or rem, but for reusable components, % is almost always what you want. This tool only outputs percentages — paste, then change units in your CSS if you really need a fixed size.
- Does the element still take up its original space?
- Yes. `clip-path` is purely a paint-time effect — the element's layout box doesn't change, so surrounding content flows around the original rectangle, not the clipped shape. If you need the layout to respect the visible shape, use `shape-outside` (separate property), `mask-image`, or an SVG with a path.
- Can I animate clip-path?
- Yes, but only between paths with the same number of vertices in the same shape family — you can animate one polygon to another polygon with identical vertex count, or one circle to another circle, but not polygon-to-circle. For polygon morphing make sure both states have the same number of points in roughly the same order. The browser interpolates vertex coordinates linearly.
- What's the inset 'round' value for?
- It's an optional radius applied to the four corners of the inset rectangle — same syntax as `border-radius`. `inset(10% round 5%)` is a rounded rectangle clip. Set it to 0 (no `round`) for sharp corners. The CSS spec lets you specify different radii per corner (`round 10% 20% 5% 15%`), but this tool keeps it simple with one uniform value.
- Why both clip-path and -webkit-clip-path?
- Safari needs the `-webkit-clip-path` prefix on versions older than 14.1 (2021). Almost all current browsers support unprefixed `clip-path`. Emitting both costs nothing and protects users on slightly older devices. You can drop the `-webkit-` line if you only target evergreen browsers.
Related tools
Border Radius Generator
Drag corners independently, try elliptical radii, copy the CSS — with chat-bubble, pill, blob, and tab presets.
CSS Triangle Generator
Generate pure-CSS triangles (8 directions) using border or clip-path — copy the rule, drop it in.
Image Round Corners
Apply rounded corners, a full circle mask, or per-corner radii to an image — preview with a checkerboard for transparency, download as PNG or JPEG.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
CSS Flexbox Playground
Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.
CSS Grid Playground
Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.