CSS Masking (mask-image)

1) Linear Gradient Fade

.fade{
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

Use a black→transparent gradient to fade out content. Black = visible; transparent = hidden.

2) Spotlight with radial-gradient()

.spotlight{
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 70%);
  -webkit-mask-position: 60% 45%;
  mask-position: 60% 45%;
}

3) Striped Mask (Repeating Linear)

.stripes{
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px);
  mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px);
}

Great for “scanline” reveals or patterned cutouts.

4) Image Mask (Inline SVG Star)

.star{
  -webkit-mask-image: url(star.svg); /* or data URL */
  mask-image: url(star.svg);
  -webkit-mask-size: 80% 80%;
  mask-size: 80% 80%;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Any white parts of the mask shape reveal the element; transparent parts hide it.

5) Position & Size Control

.spot{
  -webkit-mask-image: radial-gradient(circle at 20% 30%, #000 52%, transparent 55%);
  mask-image: radial-gradient(circle at 20% 30%, #000 52%, transparent 55%);
  -webkit-mask-size: 120% 120%;
  mask-size: 120% 120%;
}

6) SVG <mask> (for SVG Elements)

<svg viewBox="0 0 300 150" width="100%">
  <defs>
    <mask id="m1">
      <!-- white = show, black = hide -->
      <rect fill="white" width="100%" height="100%"/>
      <circle fill="black" cx="220" cy="75" r="40"/>
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="url(#grad)" mask="url(#m1)"/>
</svg>

SVG masks are perfect when you’re already working with inline SVG shapes.