Design Atlas
한국어
✦ Visual effects

Clip-path reveal

클립 패스 리빌

Animating a clip-path shape so an image or block of text appears to be cut open, revealing what’s underneath.

Also known as: Wipe revealPolygon reveal
···
html
<div class="img"></div>
css
.img{width:min(280px,80%);aspect-ratio:16/10;border-radius:14px;
  background:linear-gradient(135deg,#5b5bf7,#18c29c 50%,#ffb648);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);animation:reveal 3.6s ease-in-out infinite}
@keyframes reveal{
  0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}
  40%,55%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}

clip-path (inset()/polygon()/circle()) hides everything outside the shape while the element still occupies its normal layout box. Transitioning between two shape values lets the browser interpolate the shape, producing a wipe-style reveal.

Smooth interpolation only works between polygon()s with the same number of points — a mismatched vertex count snaps instead of animating.

When to use

Use for scroll reveals, image gallery transitions, hero entrance animation. Older browsers lack support, so plan a fallback.