CSS Masks

CSS masking lets you control the visibility of an element by defining which parts are visible and which are hidden. Think of it like placing a stencil over an image — only the parts that show through the stencil are visible. Masks are powerful for creating complex visual effects.

Basic Masking

The mask-image property defines what to use as the mask. You can use images, gradients, or SVGs. The visible parts of the mask determine which parts of the element are visible.

.masked-image {
  mask-image: url('circle.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
    

The mask works like an alpha channel — white areas in the mask are fully visible, black areas are fully hidden, and gray areas are partially transparent.

Gradient Masks

One of the most common uses is fading an element with a gradient mask. This creates a smooth transition from visible to hidden, which is great for text fades and image effects.

.faded-edge {
  mask-image: linear-gradient(
    to bottom,
    black 60%,
    transparent 100%
  );
}

.side-fade {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}
    

The first example fades the bottom of an element. The second fades both left and right edges, keeping the center fully visible. This is commonly used for scrollable content indicators.

Mask vs Clip-Path

Both mask and clip-path can hide parts of an element, but they work differently. clip-path creates a sharp boundary — an element is either inside or outside the shape. Masks support gradients and opacity, allowing soft edges and smooth transitions.

/* Sharp cutout */
.sharp {
  clip-path: circle(50%);
}

/* Soft edge */
.soft {
  mask-image: radial-gradient(circle, black 40%, transparent 70%);
}
    

Use clip-path for geometric shapes. Use masks when you need gradients, soft edges, or complex alpha-channel effects.