CSS Masking

CSS Masking allows you to control the visibility of specific parts of an element by applying a mask. Think of it as a stencil or cutout—you decide which areas of the element should be shown and which should be hidden, either fully or with transparency.

This is commonly used to create visually engaging effects like image reveals, gradient fades, or custom shapes using masks.

How Does CSS Masking Work?

A mask works by applying transparency over parts of an element. It uses black, white, or transparent areas:

Black areas of the mask hide the element
White areas show the element
Gray areas create partial visibility (if supported)

CSS Mask Properties

Property	Description
`mask-image`	Defines the image or gradient to use as a mask
`mask-repeat`	Controls if the mask image repeats
`mask-position`	Sets position of the mask
`mask-size`	Sets size of the mask
`mask-composite`	Controls how multiple masks are combined

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Masking – Learn With Arshyan</title>
  <style>
    .masked-box {
      width: 400px;
      height: 250px;
      background: url('https://via.placeholder.com/400x250') no-repeat center;
      background-size: cover;
      -webkit-mask-image: linear-gradient(to right, transparent, black 60%);
      mask-image: linear-gradient(to right, transparent, black 60%);
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
    }
  </style>
</head>
<body>

  <h2>Image Mask Example</h2>
  <div class="masked-box"></div>

</body>
</html>

What This Code Does:

The image appears from left to right.
The left side is transparent (hidden) and fades into full visibility on the right.
This creates a fade-in effect using a linear gradient as the mask.

Use a PNG Mask Image

If you have a black-and-white mask image (e.g., PNG), you can use it like this:

				
					.masked-logo {
  width: 300px;
  height: 300px;
  background: url('your-image.jpg');
  mask-image: url('mask-shape.png');
  mask-repeat: no-repeat;
  mask-size: contain;
}

your-image.jpg is the content.
mask-shape.png determines which parts are visible.
Only white areas of mask-shape.png will show the image underneath.

Other Masking Techniques

You can use:

Radial Gradients: mask-image: radial-gradient(...)
Conic Gradients: mask-image: conic-gradient(...)
SVG Masks: for more control using vector shapes

Summary Table

Technique	Use Case
Gradient Masking	Fading effects
Image Masks	Creative shapes, logos, reveal text
SVG Masks	Complex vector-based masking

Learn With Arshyan Tip:

Masking is supported in most modern browsers, but always test across devices. Combine it with animations or transitions for even more powerful UI effects.