CSS Clip-Path Generator

How to use this tool

Choose a preset shape or select Polygon, Circle, Ellipse, or Inset mode.
Drag polygon points or adjust the visible radius, center, and inset controls.
Check the live preview and copy the generated clip-path CSS rule.

CSS clip-path syntax

clip-path defines the clipping region of an element - only the area inside the path is visible. Values can be basic shapes or an SVG path.

Basic shape functions

Function	Example	Result
`circle()`	`circle(50% at 50% 50%)`	Circle centered on element
`ellipse()`	`ellipse(60% 40% at 50% 50%)`	Ellipse
`inset()`	`inset(10px 20px round 8px)`	Inset rectangle with optional corner radius
`polygon()`	`polygon(50% 0%, 100% 100%, 0% 100%)`	Triangle
`path()`	SVG path data string	Any arbitrary shape

Animation tip

clip-path can be animated with CSS transitions, but only between shapes of the same type with the same number of polygon points. Animating between a triangle (3 points) and a square (4 points) requires converting both to 4-point polygons.

clip-path vs. mask-image

Both clip-path and mask-image hide parts of an element, but they work differently:

clip-path: defines a hard geometric boundary. Everything inside is fully visible; everything outside is fully hidden. Simple to write and well-supported. No partial transparency at edges.
mask-image: uses an image or gradient as a mask. Black = hidden, white = visible, gray = partially transparent. Supports feathered edges, gradient fade-outs, and bitmap masks. More powerful but more complex.

Use clip-path for sharp decorative shapes; use mask-image when you need soft edges or gradient reveals.

Common decorative clip-path patterns

Diagonal slice: polygon(0 0, 100% 0, 100% 85%, 0 100%) - slanted bottom edge, popular for section dividers
Chevron / arrow: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%) - rightward arrow shape for step indicators
Hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Angled footer: polygon(0 10%, 100% 0, 100% 100%, 0 100%) - lifts one corner to create a slanted top edge

Browser support note

circle(), ellipse(), inset(), and polygon() have been supported in all major browsers since 2016. path() (SVG path data) gained broad support only from 2020–2021 (Chrome 88, Firefox 71, Safari 13.1). If you need to support older browsers, stick to the four named shape functions and avoid path().

Frequently asked questions

What shapes can clip-path create?

clip-path supports polygon(), circle(), ellipse(), and inset() shapes. Start from a preset, then drag or type polygon coordinates, adjust a circle or ellipse radius and center, or set each inset side and corner radius. Polygon coordinates use percentages so the shape scales with its element.