Clip Path Generator

Create circles, ellipses, polygons, and more complex CSS shapes visually, then copy the exact `clip-path` value. Useful for hero cutouts, masked images, cards, and experimental UI sections.

Shape

Size50%

Live Preview

Generated CSS

/* CSS Clip Path - circle */
.clipped {
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Clip Path Generator?

CSS clip-path hides parts of an element outside a chosen shape, which makes it useful for circular crops, angled sections, layered hero graphics, and more experimental UI treatments. Instead of calculating polygon coordinates by hand, you can shape the result visually and copy the CSS value.

It is most helpful when you want custom geometry without exporting a separate asset. Designers and developers often use clip-path for image masks, decorative section edges, or callout cards that need more personality than a plain rectangle.

How to Use Clip Path Generator

Select a shape preset (circle, ellipse, polygon, etc.)

Adjust the shape parameters using sliders

Preview the clipping effect in real-time

Copy the generated CSS clip-path code

Common Use Cases

Frontend developers building diagonal hero sections or angled content blocks without extra image assets.
Designers masking photos into circles, ellipses, or custom polygons for landing pages and portfolios.
Marketing pages using clipped cards or badges to break out of a standard grid layout.
Creative UI experiments where product shots, avatars, or posters need custom polygon shapes.
Teams prototyping animated shape transitions for hover states or reveal effects.

Example Input and Output

Polygon-based shapes are useful for angled sections, badges, and custom media masks.

Shape points

Preset: polygon
Points:
- 0% 0%
- 100% 0%
- 100% 78%
- 52% 100%
- 0% 82%

Generated CSS

clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 52% 100%, 0% 82%);

Browser support

Modern browsers support `clip-path` well, but older browsers may need fallbacks. Use simple shapes when broad compatibility matters.

Animation tip

Clip-path animations work best when the start and end shapes use compatible point counts. Big mismatches can produce awkward jumps between states.

Frequently Asked Questions

What is the browser support for clip-path?

clip-path is supported in all modern browsers. For older browsers, you may need vendor prefixes or fallbacks.

Can I animate clip-path?

Yes! clip-path values can be animated with CSS transitions for smooth shape morphing effects.

Can I use clip-path on images as well as divs?

Yes. clip-path works on many HTML elements, including images, containers, and decorative layers, as long as the browser supports the property.

When should I use polygon instead of circle or ellipse?

Use polygon when you need custom corners, angled edges, badges, or irregular shapes. Circle and ellipse are simpler when you want rounded crops or spotlight effects.

Why does my shape look different after the element resizes?

Most clip-path coordinates are percentage-based, so they scale with the element. If the aspect ratio changes a lot, the final shape can look stretched or compressed.

Is clip-path better than exporting an SVG mask?

For many simple shapes, yes, because it keeps the effect in CSS and is fast to tweak. For very intricate artwork or precise paths, an SVG mask can still be the better choice.