CSS clip-path Shape Generator

CSS clip-path: cropping HTML elements with pure CSS

The clip-path property defines a visible region of an HTML element: anything outside the region is hidden, including borders, backgrounds and shadows. It replaced the old clip property (limited to rectangles) and works on any element — images, divs, videos, text, even iframes — without an SVG mask or a graphics library. Browser support is excellent: Chrome 55+, Firefox 54+, Safari 10+ (with path() from 13.1).

Built-in shape functions

CSS ships with four basic shape functions that cover most use cases:

clip-path: inset(10px 20px 10px 20px round 10px);
clip-path: circle(50% at 50% 50%);
clip-path: ellipse(50% 25% at center);
clip-path: polygon(50% 0, 100% 100%, 0 100%);

polygon() is the most powerful: each vertex is given as x y in percentages or pixels and the points are connected in order. Three points form a triangle; with four you build parallelograms and chevrons; six produce hexagons; ten alternating inner/outer radii draw a star.

Advanced: path(), shape() and SVG references

When polygons fall short, clip-path: path("M0 0 L100 100 ...") accepts full SVG path syntax including Bézier curves, arcs and sub-paths. The newer shape() function (CSS Shapes 2 draft) introduces a friendlier syntax with mixed units. You can also reference an inline SVG <clipPath>: clip-path: url(#mask) — useful for reusing complex shapes across many elements.

Animations and transitions

clip-path is animatable when both keyframes use the same function and the same number of vertices. A hover reveal becomes transition: clip-path 0.3s ease; with two polygon states. Engines composite the clip on the GPU for transforms, so animations are smooth even on mid-range mobile. If the vertex count differs, the property snaps instead of interpolating — pad the smaller polygon with duplicate points to match.

Use cases and tooling

• Avatars with irregular shapes (hexagons, blobs, scalloped circles).
• Image reveals on hover — animating a circle that grows from the cursor.
• Diagonal section dividers, used heavily by SaaS landing pages.
• Tilted hero backgrounds without SVG wrappers or extra DOM nodes.

The classic visual editor is Clippy (bennettfeely.com/clippy) — drag the vertices and copy the CSS. The modern CSS-4 additions rect() and xywh() are useful for axis-aligned crops.

FAQ

What is the difference between clip-path and mask-image? clip-path is binary — a pixel is fully visible or fully removed. mask-image supports alpha channels and gradients, so you can fade an edge instead of cutting it sharply.

Can I animate between two different polygons? Yes, as long as both lists have the same number of vertices. The browser interpolates each point linearly. To morph between completely different shapes, use path() with the same number of commands.

Does clip-path accept SVG paths? Yes, in two ways: inline with path("...") or by referencing an inline SVG via url(#id). The second form lets the same shape be reused on multiple elements.

Is there a performance cost? Minimal. Clipped elements are promoted to their own composited layer, so paint cost is low; the only thing to avoid is animating clip-path on hundreds of elements at once on low-end devices.