CSS Clip-Path Generator
Cut elements into any shape. Drag the handles to build a polygon(), or make circle(), ellipse() and rounded inset() clips, then copy the CSS or a Tailwind class.
Presets
Shape
Points
Drag the handles in the preview, or type exact values (% of the box). Double-click the preview to add a point on the nearest edge.Circle
A % radius is measured against the box diagonal ÷ √2, so 50% is not always half the width.Ellipse
Inset
Output
Preview box
What Is clip-path?
A CSS property that shows only the part of an element inside a shape you define.
clip-path hides everything outside a shape. The element keeps its normal size and position in the layout, so the surrounding content doesn't move. Only what's drawn changes.
Clicks and hovers follow the shape too: a pointer over a clipped-away corner reaches whatever is underneath. That makes clip-path a good fit for angled hero sections, hexagon avatars, arrow-shaped buttons and diagonal image cuts.
Four basic shapes are supported everywhere: polygon() for straight-edged shapes, circle(), ellipse() and inset() (a rectangle with optional rounded corners).
Positions in % are relative to the element's size, so a % shape stretches with the element. px values keep exact sizes, which suits a fixed-size element. Because clip-path can be animated, two polygons with the same number of points can morph smoothly with a CSS transition.
clip-path Shapes
The four basic shape functions and what each value means.
polygon(50% 0%, 100% 100%, 0% 100%)
A list of x y points, joined in order and closed automatically. At least 3 points. An optional evenodd first value changes how crossing edges are filled.
circle(50% at 50% 50%)
Radius, then the centre after at. A % radius is measured against √(width² + height²) ÷ √2. closest-side and farthest-side also work.
ellipse(50% 35% at 50% 50%)
Horizontal radius (% of the width), vertical radius (% of the height), then the centre.
inset(10% 20% round 16px)
Distances in from the top, right, bottom and left (the same 1–4 value shorthand as margin), plus optional rounded corners after round.
path() and shape()
Also valid, for curves. path() uses fixed pixel SVG coordinates, and shape() is new (2025) and not yet in every browser. This tool sticks to the four shapes above, which work everywhere.
Animating
transition: clip-path .3s morphs between two shapes of the same type. Polygons must have the same number of points, otherwise the change jumps instead of animating.
How to Use the CSS Clip-Path Generator
Get your result in under ten seconds.
Pick a shape
Start from a preset or choose polygon, circle, ellipse or inset.
Shape it
Drag the handles in the preview (they also move with the arrow keys), or type exact values. Add or remove polygon points as you need.
Copy the code
Choose % or px, then copy the CSS or the Tailwind class.
Why Use the CSS Clip-Path Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Drag or type
Move handles in the preview with a mouse, finger or the arrow keys, or enter exact values.
4 shape types
polygon, circle, ellipse and inset with rounded corners.
20+ presets
Triangles, arrows, chevrons, stars, hexagons, frames and more.
Exact output
The preview uses the same string you copy, so what you see is what you get.
Tailwind too
Get a ready-to-paste arbitrary-property class that works in Tailwind v3 and v4.
Private
Runs entirely in your browser.
Frequently Asked Questions
Yes. The basic shapes (polygon, circle, ellipse, inset) work unprefixed in every current browser. Safari 13 and older needed -webkit-clip-path, which you can add with one tick.
Use % (the default) when the element can change size: the shape stretches with it. Use px for a fixed-size element when you need exact distances. px values are calculated for the preview box size, so set the box to your element's real size first.
clip-path also clips shadows, outlines and borders that fall outside the shape. Put the clip-path on an inner element, or use filter: drop-shadow() on a wrapper around the clipped element.
Yes, with transition: clip-path 0.3s or keyframes, as long as both shapes are the same type. Polygons also need the same number of points. Add extra points to the simpler shape if necessary.
When a polygon's edges cross (like a five-point star drawn with one line), the default nonzero rule fills the overlapping middle. evenodd cuts it out instead.
Circles, ellipses and inset's rounded corners give you curves. For free-form curves, CSS has path() (fixed pixel coordinates) and the newer shape(). Alternatively, use an SVG <clipPath> with clip-path: url(#id).
Yes. clip-path only changes what's painted (and where the element can be clicked). The element's layout box stays the same size.
Only in your own browser (local storage). Press Reset to clear it.