CSS clip-path: Shapes, Polygons & Animations

How clip-path Works

clip-path defines a clipping region. Everything inside the region is visible; everything outside is hidden. Unlike overflow:hidden, clip-path can create non-rectangular shapes and can be smoothly animated between compatible shapes.

Basic Shape Functions

/* Circle: clip-path: circle(radius at cx cy) */
.avatar {
  clip-path: circle(50%);          /* perfect circle */
  clip-path: circle(40% at 50% 50%);  /* explicit center */
}

/* Ellipse: clip-path: ellipse(rx ry at cx cy) */
.blob {
  clip-path: ellipse(60% 40% at 50% 50%);
}

/* Inset: clip-path: inset(top right bottom left round radius) */
.card {
  clip-path: inset(0 0 0 0 round 16px);  /* rounded rect mask */
  clip-path: inset(10% 5% round 24px);    /* shrink + round corners */
}

/* Polygon: clip-path: polygon(x1 y1, x2 y2, ...) */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.arrow {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Angled Hero Sections

The diagonal slice is one of the most popular clip-path uses — it creates a natural visual break between a colored hero section and the white content below.

/* Diagonal bottom edge on a hero section */
.hero {
  background: linear-gradient(135deg, #7c6fff, #06b6d4);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  padding-bottom: 120px; /* compensate for clipped area */
}

/* Opposite diagonal */
.hero-reverse {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

/* Chevron bottom */
.hero-chevron {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

Animating clip-path

clip-path can be animated — but only between compatible shapes with the same number of points. Use polygon to polygon, circle to circle. For cross-shape animation, convert everything to polygon.

/* Hover reveal animation */
.image-reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); /* start hidden */
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-reveal:hover,
.image-reveal.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); /* fully visible */
}

/* Expanding circle reveal (good for page transitions) */
.page-cover {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.8s ease;
}
.page-cover.open {
  clip-path: circle(150% at 50% 50%);
}

/* Scroll-triggered with IntersectionObserver */
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('visible');
  });
});
document.querySelectorAll('.image-reveal').forEach(el => observer.observe(el));

SVG path Clipping

Browser Support

Common clip-path Mistakes

• Animating between incompatible shapes — polygon to circle won't interpolate smoothly. Convert both to polygon with the same vertex count.
• Forgetting overflow padding — clip-path hides box-shadow. Use a wrapper element with the shadow, and clip the inner element.
• Clipping text accidentally — clip-path clips the entire element including children. Apply it to image wrappers, not to containers holding text.
• Using only px units — prefer % for responsive shapes. px-based polygons break at different screen sizes.
• Not testing Safari — Safari has had clip-path quirks with -webkit-clip-path. Always add the prefixed version: -webkit-clip-path: circle(50%); clip-path: circle(50%);

Frequently Asked Questions

Does clip-path affect layout?

No — clip-path is purely visual. The element still takes up its full box-model space; only the painted pixels change. Use it alongside margin and padding as normal.

Can I use clip-path on video elements?

Yes! clip-path works on any element including img, video, canvas, and SVG. This makes it great for shaped video players.

How do I generate polygon coordinates?

Use tools like Clippy (bennettfeely.com/clippy) to visually draw shapes and copy the CSS. Firefox DevTools also has a built-in clip-path editor when you click the polygon icon in the Styles panel.

What's the difference between clip-path and mask?

clip-path uses geometric shapes for binary clipping (visible or hidden). mask uses image/gradient alpha channel for partial transparency — it's more powerful but heavier. Use clip-path for shapes, mask for gradual fade effects.