Clip-Path Generator

Visual tool for CSS clip-path shapes with presets, polygon editor, and export.

Presets

Custom clip-path value

Preview

Background

Size

Use sample imageShow outline

Export

CSS class

.clipped {
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

Inline style

style="clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%);"

Value only

circle(50% at 50% 50%)

Tailwind

/* Tailwind: use arbitrary value */
[clip-path:circle(50% at 50% 50%)]

Common clip-path use cases

CSS clip-path is used to hide parts of an element outside a defined region. Common use cases include: image masks (circles, hexagons, custom shapes), card and banner shapes, decorative cutouts, and responsive “reveal” effects. Combine with transitions for animated clip reveals.

Circle vs polygon vs inset

circle(radius at x y) clips to a circle—ideal for avatars and round images. ellipse(rx ry at x y) gives an oval. polygon(x1 y1, x2 y2, …) lets you define any shape by listing corner points in order (percent or length). inset(top right bottom left round radius) clips to an inner rounded rectangle, useful for “frame” effects.

Browser support notes

clip-path is supported in all modern browsers. For older WebKit (e.g. Safari < 9), use the -webkit-clip-path prefix alongside clip-path. This tool outputs both. SVG-based clip-path is an alternative for very old browsers.

clip-path vs border-radius

border-radius only creates rounded rectangles. clip-path can create circles, ellipses, polygons, and custom shapes. Use border-radius for simple rounded corners; use clip-path when you need non-rectangular shapes or animated shape changes. Both are GPU-friendly and performant.

Frequently Asked Questions

What is CSS clip-path?

clip-path is a CSS property that defines a region to display. Only the area inside the path is visible. You can use circle(), ellipse(), polygon(), or inset() to create shapes.

Can I use percentage values?

Yes. Percentages in circle/ellipse and polygon are relative to the element's dimensions. circle(50% at 50% 50%) means a circle with radius 50% of the smaller dimension, centered. Polygon points are x% y% from the top-left.

How do I create custom polygon points?

Use the visual editor for polygon presets: drag points to move them, or click on the shape to add a new point. You can also edit the value in the Custom field. List points in order around the shape.

Explore these related free tools to enhance your productivity and workflow.

Border Radius Generator

Create custom border radius values for all corners with individual or locked controls

Box Shadow Generator

Generate CSS box shadows with custom offsets, blur, spread, color, and opacity

CSS Filter Generator

Create and preview CSS filter effects (blur, brightness, contrast, sepia, etc)

CSS Gradient Generator

Create beautiful linear and radial CSS gradients with custom colors, angles, and stops