What is CSS clip-path and how does it work?

CSS clip-path is a property that creates a clipping region to define which parts of an element are visible. Anything outside the clipping region is hidden. It supports four basic shape functions: polygon() for custom multi-point shapes, circle() for circular clips, ellipse() for oval clips, and inset() for rectangular clips with optional rounded corners. The values use percentages or lengths relative to the element's bounding box.

Is clip-path supported in all browsers?

CSS clip-path with basic shapes (polygon, circle, ellipse, inset) is supported in all modern browsers including Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. The property has over 97% global browser support as of 2025. For older browsers, you can use the -webkit-clip-path prefix as a fallback. The url() value referencing SVG clipPath elements has even broader support.

Can I animate CSS clip-path transitions?

Yes, CSS clip-path can be animated using CSS transitions and keyframe animations. For smooth transitions between shapes, both the starting and ending clip-path values must use the same shape function with the same number of points. For example, you can smoothly transition between two polygon() values that both have 6 points. Animating between different shape types (e.g., circle to polygon) requires JavaScript or the Web Animations API.

CSS Clip-Path Generator

Create custom CSS clip-path shapes visually. Click to add points, drag to adjust, and choose from 15+ preset shapes. Supports polygon, circle, ellipse, and inset clip paths with real-time CSS output. Everything runs in your browser.

Click to add points

Preview

Shape Type

Presets

Circle Settings

Radius 40%

Center X 50%

Center Y 50%

Ellipse Settings

Radius X 40%

Radius Y 30%

Center X 50%

Center Y 50%

Inset Settings

Top 10%

Right 10%

Bottom 10%

Left 10%

Radius 0%

Polygon mode: Click canvas to add points. Drag points to reposition. Right-click a point to remove it.

Preview Background

CSS Output

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

Browser Support: clip-path basic shapes have 97%+ global support.

Chrome 55+ Firefox 54+ Safari 9.1+ Edge 79+

How to Use the CSS Clip-Path Generator

The CSS clip-path property lets you clip elements into any shape. This visual generator makes it easy to create complex clip paths without manually calculating coordinates.

Polygon Mode

Click anywhere on the canvas to add points. Each point is defined as a percentage position (x% y%). Drag points to reposition them. Right-click a point to remove it. The polygon shape is drawn by connecting all points in order.

Circle & Ellipse Mode

Use the sliders to adjust the radius and center position, or drag the handles directly on the canvas. Circle uses a single radius value, while ellipse lets you set independent horizontal and vertical radii for oval shapes.

Inset Mode

Inset creates a rectangular clip with configurable offsets from each edge (top, right, bottom, left) plus an optional border-radius for rounded corners. Use the sliders or drag the edge handles on the canvas.

Using with CSS

Copy the generated code and apply it to any HTML element:

.clipped-element {

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

  /* Add -webkit- prefix for Safari <= 13 */

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

}

CSS Clip-Path Generator

How to Use the CSS Clip-Path Generator

Polygon Mode

Circle & Ellipse Mode

Inset Mode

Using with CSS

Related Tools

CSS Gradient

Box Shadow

CSS Grid Generator

Flexbox Generator

Frequently Asked Questions