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. Everything about the element, including its background, borders, and content, is clipped together as one unit.

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 Shapes

polygon() is the workhorse of clip-path: give it a list of x, y coordinate pairs and it connects them in order with straight lines, closing the shape back to the first point automatically. Coordinates are usually written as percentages so the shape scales with the element. The Polygon tab above lets you 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 Shapes

circle() and ellipse() are the simplest shape functions: pick a radius (or two radii for an ellipse) and a center point, and the browser draws the curve for you. These are a common choice for avatar-style image crops, circular badges, and spotlight or reveal effects, since a single value change can grow or shrink the shape smoothly.

Inset Shapes and Rounded Corners

inset() pulls each edge of the element inward by a fixed amount, similar to padding but for the visible shape rather than the content box. Adding the round keyword rounds the resulting rectangle's corners, for example inset(0 round 12px) clips an element down to a rounded rectangle with a 12px radius on every corner. For a plain rounded box with no clipping involved, border-radius is simpler and has been supported for longer, 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. The catch is that 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.

clip-path vs background-clip

These two properties share part of a name but do unrelated jobs. clip-path cuts the entire element, background, borders, content and all, down to a custom shape. background-clip only controls how far an element's background paints under its border and padding, with values like border-box, padding-box, and content-box, or clips the background image to the shape of the text itself with background-clip: text. If a background image needs to be cut into a circle or polygon, clip-path is the property to reach for, not background-clip.

clip-path vs SVG clipPath

CSS clip-path shape functions are convenient because they live directly in a stylesheet next to the rest of an element's styling, and they are the better fit for straightforward polygons, circles, ellipses, and insets. An SVG clipPath element is defined once inside an inline svg block and then referenced from CSS with clip-path: url(#id). It is the better fit for shapes with real curves, shapes reused across several elements, or shapes generated from vector art, since SVG path data is far more expressive than a single CSS function call. The SVG output tab above builds this markup automatically from whatever shape is active.

Animating clip-path

clip-path can be transitioned or animated with regular CSS transition and @keyframes rules, but the browser can only interpolate smoothly between two values that use the same shape function with the same number of arguments. Two polygon() shapes will morph cleanly only if both have the same number of points in the same order; a circle() cannot morph directly into a polygon(), so approximate the circle as a many-sided polygon first if a shape swap needs to animate. For building out the keyframes themselves, CSS Toolkit's animation generator and animation guide cover the timing and easing side of the process.

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 -webkit- prefix is only relevant for Safari versions older than 14, so most projects can leave the prefix toggle in this generator switched off; it is included for teams that still need to support those older Safari releases.

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.
• Shapes do not interpolate across functions. As covered above, animating between a circle() and a polygon(), or between two polygons with a different point count, will snap instead of transitioning smoothly.

Common Clip-Path Shape Recipes

Triangle

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Hexagon

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Arrow (pointing right)

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

Message Bubble

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 65% 100%, 65% 75%, 0% 75%);

Rounded Rectangle via inset()

clip-path: inset(0 round 16px);

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

What is clip-path in CSS?

clip-path is a CSS property that hides part of an element outside a defined shape, such as a polygon, circle, ellipse, inset rectangle, or custom curve. Only the visible portion inside the shape is painted and receives pointer events; the rest of the box is invisible and unclickable.

What is the difference between clip-path and background-clip?

clip-path cuts an entire element, including its content, borders, and background, down to a custom shape. background-clip is unrelated: it only controls how far an element's background extends under its border, padding, or content box, or clips the background to text with background-clip: text.

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 the same as Clippy?

Clippy, at bennettfeely.com, is a well known free polygon clip-path tool. This generator covers the same polygon use case plus circle, ellipse, inset, and curve shapes, an image preview mode, and matching SVG clipPath output, all on CSS Toolkit alongside the rest of your CSS tools.

How do I animate a clip-path shape?

Transition or animate clip-path like any other property, but the two shapes must use the same function with the same number of values to interpolate smoothly. Two polygon() shapes need the same point count, and a circle() will not morph into a polygon() directly; approximate the circle as a many-sided polygon first.

Can clip-path create rounded corners?

Yes, using inset() with a round keyword, for example inset(0 round 12px). For a simple rounded rectangle without clipping content or backgrounds, border-radius is usually the better and more widely supported choice.

What is the difference between CSS clip-path and an SVG clipPath element?

CSS clip-path shape functions like polygon() and circle() are written directly in CSS and are easiest for simple shapes. An SVG clipPath element is defined once in markup and referenced with clip-path: url(#id); it is the better option for complex or reusable curved shapes, which this generator outputs alongside the CSS version.