CSS `clip-path`

Create visually engaging shapes and effects by clipping elements with CSS!

What is the `clip-path` Property?

The CSS clip-path property allows you to define a visible region of an element, hiding everything outside of a specified shape. This enables creative layouts, image masks, and interactive effects without extra markup or images.

Shape Options: Use basic shapes (circle(), ellipse(), polygon(), inset()) or SVG paths.
Animate & Transition: Animate between shapes for dynamic effects.
Performance: Hardware-accelerated and efficient for modern browsers.

Syntax

selector {
  clip-path: circle(50% at 50% 50%);
  /* or */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  /* or */
  clip-path: path('M10,10 ...');
}

💡 Tip: Use Clippy to visually generate clip-path shapes!

Browser Support: clip-path is supported in all modern browsers.

Interactive Examples

Circle Clip

.clip-circle {
  clip-path: circle(50% at 50% 50%);
}

Polygon (Hexagon) Clip

.clip-hex {
  clip-path: polygon(
    25% 5%, 75% 5%,
    100% 50%, 75% 95%,
    25% 95%, 0% 50%
  );
}

Inset Clip

.clip-inset {
  clip-path: inset(20% 10% 20% 10% round 2rem);
}

SVG Path Clip

.clip-svg {
  clip-path: path('M50 0 L100 100 L0 100 Z');
}

Try it: Each colored box above is clipped using a different clip-path shape. Resize your window to see the effect!

What is the clip-path Property?