Clip-Path & Masking

Cut elements into custom shapes or fade them out smoothly using alpha channels.

CSS6 min readConcept 34 of 43

What are clipping and masking?

Clipping and masking are two different ways to hide parts of an element without actually removing it from the DOM.

**Clipping** (clip-path) uses vector math to draw a sharp, hard-edged boundary. Anything outside the shape is completely invisible.

**Masking** (mask-image) uses the alpha channel (transparency) of an image or a CSS gradient. This allows for soft, feathered edges and partial transparency.

Why not just use a transparent PNG?

If you want a hexagonal image, you could edit it in Photoshop and save it as a PNG. But if you use clip-path: polygon(...) in CSS, you can apply that exact same hexagon shape to a lightweight JPEG, a video, or an entire <div> full of text!

Furthermore, clipping paths are fully animatable. You can smoothly transition a square into a circle just by changing the CSS.

How do you use them?

To clip: use clip-path: circle(50% at 50% 50%) to draw a circle in the center of the element, or clip-path: polygon(...) for custom jagged shapes.

To mask: use mask-image: linear-gradient(to bottom, black 50%, transparent 100%). The parts where the gradient is solid black will be fully visible, and the parts where it is transparent will fade away.

Try it

Toggle between a vector Clip-Path and an alpha Mask-Image to see the difference between sharp geometry and soft gradients.

Masking & Clipping

Geometry Preset

// The target element
.hero-image {
/* Sharp vector cut. Hidden parts ignore clicks. */
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
TARGET

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If you need a soft, feathered fade-out at the bottom of a scrolling text box, which property must you use?
  2. 2How does clip-path interact with mouse clicks (pointer-events)?
  3. 3Which of the following is a valid clip-path function?

Remember this

  • clip-path = sharp edges, disables clicks on hidden parts, fast performance.
  • mask-image = soft edges, catches clicks on hidden parts, heavier performance.
  • Always include -webkit-mask-image alongside mask-image.
  • Use clip-path: circle() or ellipse() to quickly round profile pictures.

Done with this concept?

Mark it complete to track your progress. No login needed.