Skip to content
LibraryCSS
Türkçe
clip-pathIntermediateUsed in 512 effects

Cutting shapes with clip-path

clip-path defines the visible region of an element. Pixels outside the region are not painted, while the element keeps its original layout dimensions. That makes clipping useful for avatars, badges, angled panels, reveals, and transitions between geometric silhouettes.

Basic shapes scale with the element and are usually the best choice for responsive UI. More complex paths are powerful, but their coordinate model and interpolation rules require extra care.

Choose the right basic shape

circle() and ellipse() accept a radius and an optional center after at. inset() cuts inward from the four sides and can add rounded corners. polygon() connects a list of coordinate pairs, usually expressed as percentages of the element's own box.

Write polygon points in a consistent direction around the perimeter. Self-intersecting paths can fill differently across shapes and are much harder to animate predictably.

circle()
Best for avatars, radial reveals, and circular controls.
inset()
Ideal for wipe reveals and rounded rectangular crops.
polygon()
Builds arbitrary straight-edged silhouettes from coordinate pairs.
cssResponsive geometric clips
.avatar { clip-path: circle(46% at 50% 45%); }
.tag { clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); }
.panel { clip-path: inset(0 round 1.25rem); }

Animate compatible shapes

Browsers interpolate basic shapes only when both endpoints use compatible functions. For polygons, the point count must match and corresponding points should describe the same semantic corners. Add duplicate points to the simpler shape when a transition needs more vertices.

Animate the clip rather than width or height when you want a reveal that keeps surrounding layout stable. Pair it with opacity sparingly so the motion remains easy to follow.

cssFour matching points at both ends
.reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 420ms cubic-bezier(.2,.8,.2,1);
}
.reveal.is-open {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Plan shadows and borders outside the clip

A normal box-shadow is painted as part of the element and is clipped away. Wrap the clipped element and apply filter: drop-shadow() to the wrapper or to a suitable descendant if the silhouette needs an external shadow.

CSS borders still follow the original rectangle, not every polygon edge. For a shaped outline, duplicate the shape on a pseudo-element or use an SVG when exact stroke geometry matters.

Verify hit testing and fallbacks

Modern browsers generally limit pointer hit testing to the clipped region, but the element still occupies its rectangular layout area. Check overlapping controls and keyboard focus indicators, especially when a large rectangle is reduced to a small shape.

Provide an unclipped fallback when the shape is decorative. Feature queries can isolate complex clipping without hiding essential content in older environments.

Live catalog examples

These production examples use clip-path. Open any effect to inspect its complete source and experiment in the browser editor.

View all 512 effects using clip-path

Browser support

Support notes refer to stable, unprefixed behavior unless a prefix is explicitly listed.

FeatureBrowsersNote
clip-path basic shapesAll modern browsersCurrent versions support circle, ellipse, inset, and polygon without a prefix.
clip-path: path()Modern browsers with caveatsFixed path coordinates are less responsive than percentage-based basic shapes.
Animated polygon()All modern browsersBoth states need matching point counts.

Common pitfalls

  • Polygon point counts differ

    Use the same number of corresponding vertices at both animation endpoints.

  • The box shadow disappears

    Apply filter: drop-shadow() around a clipped child instead of relying on its box shadow.

  • Polygon edges cross

    List points consistently clockwise or counterclockwise around the shape.

  • The focus ring is clipped

    Place focus styling on an unclipped wrapper when the ring must surround the complete silhouette.

Frequently asked questions

Does clip-path change layout size?
No. It changes painting and hit testing, while the original box remains in layout.
What is the difference between clip-path and mask?
Clipping creates a hard boundary. A mask can express partial alpha and soft gradients.
Can I animate clip-path?
Yes, when the start and end shapes are compatible. Matching polygon point counts is the most important rule.
Why is my shadow rectangular or missing?
Box shadows belong to the original box and are clipped. Use a wrapper with drop-shadow for the silhouette.

Related guides

Last updated:

All guides