CSS clip-path Tutorial: Shapes and Morphing Animations

clip-path is one of the most underused CSS properties. It lets you mask an element into any shape — triangles, hexagons, arrows — and even animate between shapes. Here’s how it works.

What clip-path does

clip-path defines a region; everything outside it becomes invisible. The element still occupies its full space in the layout — only the visible part changes.

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Each pair is an x% y% coordinate relative to the element’s box. The example above draws a triangle: top-center, bottom-left, bottom-right.

The basic shape functions

• polygon(...) — any straight-edged shape from a list of points
• circle(radius at x y) — circular clip
• ellipse(rx ry at x y) — elliptical clip
• inset(top right bottom left round radius) — a rectangle inset from each edge, optionally rounded

Examples:

.circle  { clip-path: circle(50% at 50% 50%); }
.inset   { clip-path: inset(10% 20% 10% 20% round 12px); }

Animating clip-path (the fun part)

You can transition between two polygon() shapes as long as they have the same number of points. The browser interpolates each point.

.reveal {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* full square */
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); /* cut corner */
}

Both polygons have four points, so the corner smoothly morphs on hover. If the point counts differ, the animation snaps instead of morphing — so pad the simpler shape with duplicate points to match.

Common use cases

• Diagonal section dividers between page bands
• Hexagonal image grids
• Scroll/hover reveal effects
• Speech bubbles and ribbon corners
• Circular avatar crops

Gotcha: shadows get clipped

clip-path clips everything outside the shape, including box-shadow. If you need a shadow on a clipped element, put the shadow on a parent wrapper instead:

.wrapper { filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.wrapper .clipped { clip-path: polygon(...); }

drop-shadow() follows the clipped shape, unlike box-shadow.

Browser support

All modern browsers support clip-path with basic shapes. The path() function (SVG paths) has slightly less consistent support, so prefer polygon() for maximum compatibility.

Generate shapes visually

Hand-writing polygon coordinates is tedious. Use the CSS Clip-Path Generator to drag points on a live preview, pick from 12 presets (triangle, hexagon, star, arrow…), and copy the exact clip-path value.