CSS Clip-Path Generator

What Is CSS clip-path?

clip-path is a CSS property that hides everything outside a shape you define, and shows only what falls inside it. Unlike overflow: hidden, which only clips to a rectangle, clip-path accepts several shape functions, so an element can be cut into a circle, an ellipse, a polygon with any number of points, an inset rectangle with rounded corners, or a custom curve built from an SVG path.

clip-path Syntax

element { clip-path: shape-function(arguments); }

• polygon(x1 y1, x2 y2, ...): a straight-edged shape defined by any number of coordinate pairs, each relative to the element's own box.
• circle(radius at cx cy): a circle with a given radius, centered at a position you choose.
• ellipse(rx ry at cx cy): the same idea as circle(), with separate horizontal and vertical radii.
• inset(top right bottom left round radius): a rectangle pulled in from each edge, with an optional round keyword for rounded corners.
• path('d-string'): a shape built from raw SVG path syntax, for curves that the other functions cannot express.
• url(#id): a reference to a clipPath element defined in inline SVG, useful for reusable or especially complex shapes.

Polygon, Circle, Ellipse, and Inset Shapes

Polygon is the workhorse of this generator: give it a list of x, y coordinate pairs and it connects them in order with straight lines. Drag each point directly on the preview, or start from a preset like triangle, hexagon, or star and adjust it from there. Circle and ellipse are the simplest shapes: pick a radius (or two radii for an ellipse) and a center point, useful for avatar-style crops and spotlight or reveal effects. Inset pulls each edge inward by a fixed amount, similar to padding but for the visible shape; add the round keyword for a rounded rectangle instead of a plain crop. For a plain rounded box with no clipping involved, border-radius is simpler, and CSS Toolkit's border-radius generator covers that case directly.

Curved and Custom Shapes with path()

The other four functions cannot draw a true curve, so for organic blobs, wavy edges, or teardrop shapes, clip-path falls back to path(), which accepts a full SVG path data string. path() coordinates are treated as plain pixel values matching the element's own box, not percentages, so a shape built for one size will not automatically rescale if the element's dimensions change. The Path / Curve tab above generates a path() value sized to the live preview, and also outputs an equivalent SVG clipPath using objectBoundingBox units, which does scale automatically and is usually the safer choice for production use.

Animating clip-path

clip-path can be transitioned or animated, but the browser only interpolates smoothly between two values that use the same shape function with the same number of arguments. For building the keyframes themselves, see CSS Toolkit's animation generator and animation guide.

Browser Support

clip-path is supported unprefixed in every current browser: Chrome and Edge since version 55, Firefox since version 54, Opera since version 42, and Safari since version 14. The prefix toggle above only matters for Safari versions older than that.

Common Gotchas

• box-shadow disappears. clip-path clips everything about the element, including any box-shadow, since the shadow is painted as part of the box that gets cut down to the shape. Use filter: drop-shadow() instead, which is applied after clipping and follows the visible shape.
• Clicks stop working outside the shape. Only the visible, clipped area of the element receives pointer events. A button clipped down to a small circle will not respond to clicks in the corners that used to be part of its rectangular box.

How to Use This Generator

1. Pick a shape from the Polygon, Circle, Ellipse, Inset, or Path / Curve tabs
2. Drag the handles on the preview (Polygon) or use the sliders (Circle, Ellipse, Inset), or choose a preset (Polygon, Path / Curve)
3. Switch Preview Background to Upload Image to see the shape clipped against your own image instead of the default gradient
4. Choose CSS or SVG as your output format, and toggle the -webkit- prefix if you need it
5. Click Copy Code to copy the result, or Copy Shareable Link to save your exact shape

Frequently Asked Questions

Do I need the -webkit- prefix for clip-path?

No, not for any current browser. Unprefixed clip-path has worked in Chrome, Edge, Firefox, and Opera for years, and Safari dropped its prefix requirement in Safari 14. The prefix toggle in this generator is included only for projects that still need to support very old Safari versions.

Can I apply clip-path to an image?

Yes. clip-path works on any element with a rendered box, including img tags and elements with a background-image. Switch this generator's preview to Image mode to see your own image clipped to the shape you build.

Is this a clip-path editor or a clip-path generator?

Both. Editor and generator describe the same kind of tool here: drag the points or move the sliders to build a shape visually, then copy the matching CSS or SVG code. This tool works whether you searched for a clip-path editor or a clip-path generator.

What units can I use with clip-path?

Most clip-path shape functions accept percentages, px, em, rem, or any other CSS length unit, and percentages are usually the better choice because they scale with the element. The exception is path(), which only accepts plain numbers as pixel coordinates matching the element's own box, so a path() shape needs new coordinates if the element's size changes.

For a deeper dive into clip-path vs mask-image, responsive shapes, Figma conversion, and using clip-path with Tailwind or React, see the CSS clip-path guide.