CSS Clip Path Generator

Your landing page design has a hero section with a diagonal bottom edge, hexagonal team avatars, and a star-shaped badge. In Figma, these are simple mask operations. In CSS, each shape is a clip-path: polygon(...) with 6–12 coordinate pairs that you need to calculate by hand — and one wrong percentage means a vertex is in the wrong place. You could export SVGs, but clip-path is lighter, animatable, and works on any HTML element.

Why This Tool (Not Hand-Writing Polygon Coordinates)

CSS-tricks has clip-path examples you can copy, but customizing them means editing coordinate pairs and reloading. Clippy (bennettfeely.com) is the classic tool but hasn’t been updated since 2019 and doesn’t support pixel units or the inset() function. This tool gives you 10 shape presets with draggable control points, unit switching between % and px, real-time preview, and one-click CSS copy — including the -webkit- prefix for legacy Safari. Everything runs in your browser; no data leaves your device.

What Is CSS clip-path?

CSS clip-path defines a clipping region for any HTML element. Only the portion of the element inside the clipping region is rendered — the rest is invisible. This property is a powerful tool for creating irregular shapes, image masks, decorative section dividers, and creative UI effects without rasterizing anything in image software.

The clip-path property accepts several shape functions:

Browser support is excellent — all modern browsers (Chrome, Firefox, Safari, Edge) support clip-path natively without prefixes.

How to Use the CSS Clip Path Generator

1. Pick a shape preset — choose from Circle, Ellipse, Inset, Triangle, Pentagon, Hexagon, Star, Arrow, Cross, or Custom Polygon.
2. Edit the shape — for polygon shapes, drag the control points directly on the preview canvas. For circle and ellipse, use the sliders. For inset, adjust top/right/bottom/left and optional border radius.
3. Switch units — toggle between % (responsive, relative to element) and px (absolute pixel values).
4. Copy the CSS — click “Copy CSS” to copy the full clip-path property declaration to your clipboard.

Shape Presets Explained

Circle

circle(r at cx cy) — clips the element to a circle with radius r centered at (cx, cy). Use percentage values for responsive circles that scale with the element.

clip-path: circle(50% at 50% 50%);

Ellipse

ellipse(rx ry at cx cy) — clips to an oval. rx is the horizontal radius, ry is the vertical radius.

clip-path: ellipse(50% 35% at 50% 50%);

Inset

inset(top right bottom left round border-radius) — clips to a rectangle inset from the element’s edges. The optional round keyword adds rounded corners.

clip-path: inset(10% 10% 10% 10% round 8%);

Polygon

polygon(x1 y1, x2 y2, ...) — clips to any custom shape defined by a list of vertices. The generator lets you drag-edit each point on a live canvas.

/* 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%);

Percentage vs Pixel Units

Percentage values are relative to the element’s own width for X coordinates and height for Y coordinates. A 100% x-coordinate always refers to the right edge of the element, regardless of its size.

Common Use Cases

Decorative section dividers — angle a <section> hero background using polygon() to create a diagonal cut effect:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Image masks — clip a profile photo to a hexagon or star shape:

.avatar {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Animated shapes — combine clip-path with CSS transitions or the Web Animations API for morphing effects. Both states must have the same number of polygon points for smooth interpolation.

.shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.4s ease;
}
.shape:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Text reveal effects — use clip-path on a ::before pseudo-element to progressively reveal text on scroll.

Browser Support and the -webkit- Prefix

All major browsers support clip-path without a prefix since:

• Chrome 55+ (2016)
• Firefox 54+ (2017)
• Safari 9.1+ (2016, with -webkit- prefix until Safari 13)
• Edge 79+ (Chromium-based, 2020)

For legacy iOS Safari compatibility (pre-2016 devices), include both declarations:

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

This generator outputs both the clean value and the prefixed version in the “More Formats” section.

Performance Considerations

clip-path is GPU-accelerated in modern browsers and does not trigger layout reflow when animated. For best performance:

• Prefer clip-path animation over animating border-radius or SVG d attributes
• Combine with will-change: clip-path for complex animations, but use sparingly — it consumes GPU memory
• Avoid clip-path on very large stacking contexts where it may cause repaint of the entire layer

clip-path vs SVG Masks vs CSS mask

For shapes you can describe with CSS shape functions, clip-path is the simplest and most performant option.

Frequently Asked Questions

Can I animate clip-path in CSS? Yes. Add a transition: clip-path 0.3s ease and change the clip-path on hover or via JavaScript. For polygon animations, both keyframes must have the same number of points — the browser interpolates each coordinate linearly.

Why is my clip-path not showing on a table or replaced element? clip-path does not apply to some replaced elements (like <table>) or elements with overflow: visible in some browsers. Wrap the element in a <div> and apply clip-path to the wrapper instead.

How do I create a diagonal cut at the bottom of a section? Use polygon(0 0, 100% 0, 100% 90%, 0 100%). Adjust the 90% value to control the angle. The last two points define the diagonal edge from bottom-right to bottom-left.

What is the fill-rule option in polygon()? polygon() optionally accepts nonzero or evenodd as the first argument to control how self-intersecting shapes are filled — just like the SVG fill-rule attribute. The default is nonzero.

Can I use clip-path with CSS Grid or Flexbox children? Yes. clip-path is applied after layout, so grid and flex children can be clipped independently. The clipping does not affect the layout flow — the element still occupies its original space.

Does clip-path affect pointer events? By default, pointer events (hover, click) still fire on the full rectangular box of the element, not just the visible clipped region. To restrict pointer events to the visible area, add pointer-events: painted or use an SVG <clipPath> reference.

How do I center a circle clip-path? Use circle(50% at 50% 50%). The at 50% 50% positions the center at the element’s midpoint. For a circle that fills the entire element, use circle(50%) which defaults to center.

Can I use clip-path on ::before or ::after pseudo-elements? Yes. Pseudo-elements support clip-path like any other element. This is useful for decorative overlays without adding extra HTML markup.