What clip-path does
The CSS clip-path property cuts an element down to a shape, hiding everything outside that shape. It’s how you make hexagon avatars, angled hero dividers, arrow-shaped callouts, and circular image masks without exporting a single PNG or hand-writing an SVG mask. The element keeps its content and styling; the browser simply doesn’t paint the parts that fall outside the path.
The CSS Clip-Path Generator gives you a live preview and copy-ready CSS, but knowing how the four basic shapes work will let you tweak the output confidently. Let’s go through them.
Percentages: the coordinate system
Every shape function here uses percentages relative to the element’s box. 0% 0% is the top-left corner, 100% 100% is the bottom-right, and 50% 50% is dead centre. Because the values are relative, the shape scales automatically when the element resizes — a triangle stays a triangle whether the box is 100px or 1000px wide. That responsiveness is the main reason to prefer percentages over pixels.
polygon(): arbitrary shapes from points
polygon() takes a comma-separated list of x% y% points and connects them in order, closing the loop automatically. A triangle is three points:
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);That reads as: top-centre, bottom-right, bottom-left. Add more points for more sides. The CSS Clip-Path Generator ships presets for the common cases — triangle, rhombus, pentagon, hexagon, star, and arrow — and lets you add, edit, or remove individual points when you need something custom. Stars are just polygons whose alternating points are pulled toward the centre, which the generator computes for you.
The order of points matters: list them as you’d trace the outline, or the shape will self-intersect into something unexpected. If a custom polygon looks scrambled, check that consecutive points actually neighbour each other around the perimeter.
circle() and ellipse(): rounded clips
circle() takes a radius and a centre position:
clip-path: circle(50% at 50% 50%);That’s a circle whose radius is 50% of the reference box, centred in the middle — the classic round-avatar clip. Move the at position to clip off-centre, or shrink the radius for a smaller circle floating inside the box.
ellipse() is the same idea with two radii, one horizontal and one vertical:
clip-path: ellipse(40% 25% at 50% 50%);Use ellipse when your element isn’t square and you want an oval that matches its proportions, or for soft, lens-shaped crops.
inset(): rectangles with optional rounding
inset() crops inward from each edge — top, right, bottom, left — and can round the resulting corners:
clip-path: inset(10% 20% 10% 20% round 12%);This trims 10% off the top and bottom and 20% off the sides, then rounds the corners by 12%. It’s the cleanest way to make a rounded rectangle clip or to reveal a strip of an element. Because the order of edges follows the familiar top-right-bottom-left clock used by margin and padding, it’s easy to reason about.
Choosing the right shape
A quick decision guide:
- Need a rectangle or rounded rectangle? Use
inset(). - Need a circle or oval? Use
circle()orellipse(). - Need anything with corners — triangles, stars, arrows, angled cuts? Use
polygon().
The generator lets you switch between all four and keeps your settings per shape, so you can experiment without losing your place.
Layout, events, and gotchas
The most common surprise: clip-path doesn’t reshape the layout box. If you clip a card into a hexagon, surrounding content still flows around the original rectangle, and the clipped-away corners are simply transparent. If you need text to wrap around the shape, that’s a job for shape-outside, a separate property.
By default, the clipped-away area also stops receiving pointer events, which is usually what you want — a triangular button only responds to clicks inside the triangle. Keep that in mind if a clipped element seems to “ignore” clicks near its edges.
Finally, animation: clip-path can be transitioned and animated, but only smoothly between shapes with the same number of points. Animating a triangle to a triangle works; animating a triangle to a pentagon jumps. If you want motion, pair clip-path with the techniques in our CSS animation guide and keep the point counts equal.
Browser support and fallbacks
The basic shapes — polygon, circle, ellipse, inset — are supported across all current browsers. The safe pattern is to treat the clip as progressive enhancement: an element with an unsupported clip-path simply renders un-clipped, so as long as the un-clipped version is acceptable, you need no special fallback. For decorative clips that’s almost always fine.
Bringing it together
Suppose you want a hero section with a slanted bottom edge. An inset() won’t slant, so you’d use a polygon that keeps the top corners square and pulls the bottom-left point upward:
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);Drop that on the hero and the bottom edge angles up from left to right. Rather than working out those coordinates by hand, set them with sliders and points in the CSS Clip-Path Generator, watch the preview, and copy the result. Once you understand percentages and the four shape functions, the generated CSS stops being magic and becomes something you can read and adjust at will.