ZenovayTools

CSS Clip Path Generator

Interactively generate CSS clip-path shapes: polygon, circle, and ellipse. Drag vertices, choose presets like arrow or star, and copy the CSS clip-path value.

Presets

Preview (drag points)

BG:

Vertices (3)

1
x
y
2
x
y
3
x
y

CSS Output

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

How to Use CSS Clip Path Generator

  1. 1Choose a clip-path type: polygon, circle, or ellipse.
  2. 2Select a preset shape or drag the control points to create a custom shape.
  3. 3Copy the CSS clip-path value for use in your stylesheet.
ZenovayAnalytics

Know what your visitors actually do.

  • Real-time visitor tracking
  • Privacy-first, no cookie banner
  • Set up in two minutes
Explore Zenovay

Related Tools

CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow Generator
Design CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius Generator
Create custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox Playground
Learn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

What is CSS clip-path?▾
clip-path clips an element to a specific shape. Everything outside the shape is hidden. Supported values: polygon(x1 y1, x2 y2, ...): custom polygon with vertices as percentages. circle(radius at cx cy): circle. ellipse(rx ry at cx cy): ellipse. inset(top right bottom left round radius): inset rectangle. path("SVG path"): SVG path. Example: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates a triangle. CSS clip-path replaced the deprecated SVG clipPath for most use cases. Browser support: all modern browsers. Use vendor prefix -webkit-clip-path for Safari < 14.
What are common clip-path shape patterns?▾
Triangle up: polygon(50% 0%, 0% 100%, 100% 100%). Triangle down: polygon(0% 0%, 100% 0%, 50% 100%). Hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Arrow right: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). Pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). Chevron: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%).
How does clip-path interact with border-radius?▾
clip-path overrides border-radius visually — the border-radius still exists in the box model but clip-path hides the corners, making border-radius invisible. If you want rounded shapes, use: inset(0 round 10px) for a rounded rectangle. circle() and ellipse() are inherently smooth. For rounded polygons, use the CSS basic shape polygon() combined with the upcoming corner-shape property (still experimental). A workaround: apply border-radius to a child element inside the clipped container. Both clip-path and border-radius affect click/hover areas.
Can I animate CSS clip-path?▾
Yes! clip-path supports CSS transitions and animations between shapes with the same number of points. Example: element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Both shapes must have the same number of polygon vertices for smooth interpolation. For shapes with different vertex counts, they snap without interpolation. Tip: add extra midpoint vertices to both shapes to enable interpolation between differently-shaped polygons.
What is the difference between clip-path and mask?▾
clip-path: uses a geometric shape (polygon, circle, SVG path). The clipped area is completely hidden. Crisp edges. High performance (GPU-accelerated). mask: uses an image or gradient. White = visible, black = hidden, gray = semi-transparent. Enables soft edges, gradients, and complex masks. mask-image: linear-gradient(to right, transparent, black) creates a fade effect. Use clip-path for hard geometric shapes (diagonal sections, triangles, hexagons). Use mask for soft effects, fade-outs, and image-based masks. Both accept the same SVG path syntax.