CSS Clip-Path Generator

About the CSS Clip-Path Generator

What is a clip-path generator?

The clip-path property hides everything outside a shape you describe, so a plain rectangular div can end up as a hexagon, an arrow or a diagonal band. The shape itself is written as a function. polygon() takes a list of corner coordinates, circle() and ellipse() take a radius and a center, and inset() takes four distances from the edges. Writing those coordinates by hand means guessing at numbers and reloading to see what happened, which is slow and not much fun.

This tool turns the guessing into dragging. Grab a handle on the preview and the matching number updates as you move. Every shape function has its own controls, the code below the preview is always current, and the whole design packs into the share link, so you can send a shape to someone without pasting CSS into a chat window.

Two things here are worth calling out, because most clip-path tools skip them. Clicking one of the small hollow dots splits that edge and puts a new corner exactly where the dot sits, so the point order stays sensible. Tools that just append to the end of the list will tangle a shape the moment you add a corner anywhere but the last one. And when edges do cross, this tool tells you, which beats staring at a shape that's quietly eating part of itself.

How to Use This Tool

1. Pick a shape function. Polygon covers almost everything. Circle, ellipse and inset are quicker when the shape is simple, and path takes SVG path data straight from a drawing app.
2. Start from a preset. Twenty-six shapes are ready to go, from a triangle to a speech bubble. Each chip is clipped by the shape it applies, so you can see what you are picking.
3. Drag the handles. White handles move corners. The small hollow dots on each edge add a corner there. Turn on snapping if you want the numbers to land on a round grid.
4. Check it against real content. Switch the fill between a gradient, a photo, stripes or a flat color, or load one of your own images. The four swatches above the preview change the surface behind it.
5. Copy the code. Plain CSS, an SCSS mixin, a Tailwind arbitrary class, or a JavaScript style object for React and styled-components.

Common Use Cases

Clipping is worth reaching for when a shape has to sit on top of live content, because unlike an image it scales, recolors and reflows with everything else on the page. Here's where it earns its keep.

• Angled section breaks: a four-point polygon with one slanted edge gives you a diagonal band between two sections, with no extra markup and no PNG to keep in sync with the background color.
• Hexagon and diamond avatars: a team grid reads very differently when the portraits are not squares, and the clip applies to the image at any size.
• Arrow and chevron steps: breadcrumb trails and checkout progress bars where each step points into the next one.
• Speech bubbles: one polygon with a small tail replaces the usual pseudo-element triangle trick.
• Reveal animations: transitioning between two polygons with the same number of points wipes content in from any direction.
• Text that flows around a shape: turn on shape-outside and paragraphs follow the same outline instead of the element's box.

Shaping something else? The CSS Border Radius Generator handles rounded and blob corners, the CSS Triangle Generator covers the small border arrows used in tooltips, and the SVG to CSS Background Converter inlines a whole drawing when a single shape is not enough. Or browse all our free developer tools.

Frequently Asked Questions

Why did my shadow and outline disappear?

Because they are outside the shape, and clip-path cuts everything outside the shape. Box shadows, outlines, focus rings and any overflowing child are all clipped away on the element that carries the property. The usual fix is to move the clip onto an inner element and leave the shadow on a wrapper, or to draw the shadow with filter: drop-shadow() on the parent, which follows the clipped silhouette instead of the box.

Can I animate or transition a clip-path?

Yes, with one condition that trips everyone up. Two polygons only interpolate if they have the same number of points, so a six-point shape can't animate into a four-point one. The trick is to pad the shorter shape with duplicate points until the counts match, which looks identical but gives the browser something to interpolate. Circles and ellipses animate freely, and inset animates as long as the rounding is written the same way in both states.

Should I use percentages or pixels?

Percentages, nearly always. They are measured against the element's own box, so the shape stretches with the element and stays right at every screen size. Pixels are worth it only when the element has a fixed size and you need an exact edge. The path() mode is the exception, since path data is always in pixels, which is why that option carries a warning about not being responsive.

Do I still need the -webkit- prefix?

Not for anything current. Chrome, Firefox, Edge and Safari have all shipped unprefixed clip-path for basic shapes for years. The toggle is here because Safari needed -webkit-clip-path up to version 13, so if your analytics still show a tail of old iOS devices you can add the extra line. If they don't, leave it off and keep the CSS shorter.

Why does my circle look off-center on a wide element?

A percentage radius in circle() is not measured against the width or the height. It uses a reference distance derived from both, which keeps the circle round on a rectangle rather than squashing it into an oval. The center position, on the other hand, is measured against width and height separately. On a very wide element that combination can put a small circle somewhere you didn't expect, and ellipse() with separate radii is usually what you actually wanted.

What is the difference between clip-path and mask?

A clip is a hard edge. Every pixel is either inside the shape or gone, with only a little antialiasing along the boundary. A mask uses an image or gradient, so it can fade, feather and vary in opacity across the element. Reach for a clip when you want a crisp geometric silhouette, and a mask when you want a soft edge or a texture. Clipping is also cheaper to paint, which matters if the element moves.

Does anything still fail with clip-path?

A few things. Clicks and hovers follow the clipped shape, so the corners you cut away stop being clickable. That's usually what you want, though it does surprise people. A clipped element also creates a stacking context, so z-index inside it stops competing with the rest of the page. And position: fixed children of a clipped ancestor start positioning against that ancestor rather than the viewport, which is a genuinely confusing one to debug.