Interactive Reference

Clip-Path
Explorer

Every clip-path function — circle, ellipse, inset, polygon, and path — with a live polygon editor, shape gallery, animation demos, and text masking.

01 — Foundation

How clip-path Works

clip-path defines a clipping region. Everything inside is visible. Everything outside is hidden. It doesn't affect layout — the element still occupies its normal space.

without clip-path
full rect
clip-path: none;
with clip-path
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Clip-path function overview
functionsyntaxuse case
circle()circle(radius at cx cy)Round avatars, pills, spotlight effects
ellipse()ellipse(rx ry at cx cy)Oval shapes, squished circles
inset()inset(top right bottom left round r)Rectangular crops, rounded insets
polygon()polygon(x1 y1, x2 y2, …)Any shape — triangles, hexagons, stars, arrows
path()path('M…Z')Exact SVG paths — irregular curves
noneclip-path: noneNo clipping — default
02 — circle()

circle( radius at cx cy )

Clips to a circle. Radius can be a length, percentage, closest-side, or farthest-side. Center defaults to 50% 50%.

circle() playgroundradius · cx · cy · closest-side · farthest-side
radius
50%
center X
50%
center Y
50%
background
03 — ellipse()

ellipse( rx ry at cx cy )

Like circle but with separate horizontal (rx) and vertical (ry) radii. Great for egg shapes, wide ovals, and squished circles.

ellipse() playgroundrx · ry · center-x · center-y
horizontal radius (rx)
60%
vertical radius (ry)
40%
center X
50%
center Y
50%
presets
04 — inset()

inset( top right bottom left round r )

Clips to a rectangle inset from the edges. The optional round keyword adds border-radius to the clipped corners.

inset() playgroundtop · right · bottom · left · round
all sides (uniform)
10%
top
10%
right
10%
bottom
10%
left
10%
round (border-radius on clip)
0px
presets
05 — polygon()

polygon( x1 y1, x2 y2, … )

A series of X Y coordinate pairs defining a custom shape. Minimum 3 points. Drag handles to reshape in real time.

polygon() — interactive point editordrag points · fill-rule evenodd/nonzero
preset shapes
fill-rule
Drag the purple dots to reshape.
07 — Freeform

Free Clip-Path Tester

Type any clip-path value and see it applied instantly.

free testercircle · ellipse · inset · polygon · path
clip-path value
preview
shape
08 — Motion

Animating clip-path

clip-path animates smoothly between values when the point count matches. Hover or click each demo.

hover
circle reveal
circle(0%) → circle(75%)
hover
wipe in
inset(0 100% 0 0) → inset(0)
hover
morph
triangle → diamond
hover
slide mask
center crop reveal
hover
star → circle
10-point star morph
click
blob morph
blob ↔ blob 2 (click)
09 — Text Masking

background-clip: text

Clips a background gradient to the text shape itself. Combined with -webkit-text-fill-color: transparent, it creates gradient text.

gradient text — background-clip: textbackground-clip · text-fill-color
gradient direction
135deg
color 1
color 2
text content
10 — Quick Reference

Complete Reference

Syntax Reference
functionsyntax
circle()circle([r] at [cx] [cy])
ellipse()ellipse([rx] [ry] at [cx] [cy])
inset()inset([top] [right] [bottom] [left] round [r])
polygon()polygon([fill-rule,] x1 y1, x2 y2, …)
path()path('[SVG path data]')
Tips & Tricks
tipcode
Circle avatarclip-path: circle(50%)
Hover revealclip-path: inset(0 100% 0 0) → inset(0)
Diagonal sectionclip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)
Smooth morphSame point count between keyframes
Gradient textbackground-clip: text + text-fill-color: transparent
will-change hintwill-change: clip-path for animated elements