clip path generator

How to use the clip path generator

  1. Pick from 14 preset shapes: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, heptagon, octagon, nonagon, decagon, star, cross, message bubble, arrow.
  2. Or switch to custom polygon mode — drag vertices on the preview to create any shape. Double-click the edge to add vertices.
  3. Toggle unit between % and px. Percentages scale with the element; px stays fixed.
  4. Preview the clip over a sample photo, solid color, or gradient.
  5. Copy CSS — clip-path: polygon(...) declaration.

When to use it

Use clip-path for geometric shapes, diagonal section dividers, and cut-out effects that aren't just rounded corners. Use border-radius for simple circular/oval rounding. Use SVG <mask> for complex alpha-channel cuts, gradient edges, or text-shaped clipping. Clip-path is faster (runs on the compositor) but doesn't support soft edges. Alternative: Clippy (bennettfeely.com/clippy) is the original clip-path playground; this tool adds Tailwind output and 14 presets.

Example

/* Diagonal section divider */
.section-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* Hexagon profile avatar */
.avatar-hex {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Message bubble */
.speech {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%, 75% 75%,
    75% 100%, 50% 75%, 0% 75%
  );
}

Frequently asked questions

Is clip-path animatable?
Yes — interpolation works between polygons of the same vertex count. To animate between a triangle (3 vertices) and a square (4 vertices), add a degenerate vertex so both have the same count.
Does clip-path affect hit testing?
Yes — mouse events and clicks only register within the visible clipped shape. Regions outside the clip are not clickable.
What's the browser support?
Universally supported in modern browsers as of 2023 for polygon(), circle(), ellipse(), and inset(). path() support is newer but now widely available.
Can I use SVG shapes in clip-path?
Yes — clip-path: url(#my-svg-clip) references an inline SVG <clipPath> element. Useful for shapes too complex for polygon.
Why does my clipped element still trigger scrollbars?
Clip-path hides content visually but doesn't shrink the layout box. The element still takes its full width/height. Constrain with overflow: hidden on the parent if needed.

Related generators

Last updated: 2026-04-23