Clip Path Generator

Design custom shapes using clip-path visually.

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

Presets

Preview

Background
Size

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.

By Muhammad Abdullah Rauf · Founder, EverydayTools.proUpdated 2026

What is Clip Path Generator?

Design custom shapes using clip-path visually.

Free CSS clip-path generator — build polygon, circle, and ellipse shapes visually with draggable points and copy the clip-path CSS property instantly. No signup needed.

How to use Clip Path Generator

  1. Adjust controls

    Tune sliders, points, or layers with live preview.

  2. Preview variants

    Compare states or presets before exporting.

  3. Copy CSS

    Paste the declaration into your stylesheet or component.

Advertisement

Frequently Asked Questions

What units does clip-path support?

Percentages relative to the box, px, and polygon() with comma-separated point pairs.

Will clip-path work on images?

Yes on the element or a wrapper with overflow hidden; verify in Safari for complex polygons.

Privacy, accuracy, and trust

Privacy

Clip-path coordinates are edited client-side; shape points are not uploaded.

Accuracy

Verify in target browsers; filters and clip-path support varies.

For design prototyping—not a substitute for production design tokens.

Part of Design & UI Tools

Related Tools

More free tools for the same workflow.

CSS Button Generator

Free CSS button generator — design custom buttons with gradients, shadows, border radius, and hover effects using visual controls. Copy the CSS and HTML instantly. No signup.

Advertisement

Reviewed by EverydayTools Editorial Team on 2026-05-19.