css - CSS Masking i

CSS Masking is a technique that allows you to hide or reveal parts of an element based on a mask image or shape. It’s similar to clipping, but more powerful because it can use gradients, images, or SVGs to control transparency dynamically.

1. Basic Concept

• Masking works by using an image or gradient as a mask layer.

• Opaque parts of the mask show the element, transparent parts hide it.

• The property is:

mask-image: <image | gradient>;
mask-repeat: <repeat | no-repeat>;
mask-position: <position>;
mask-size: <size>;
mask-mode: <luminance | alpha>;

2. Simple Example: Using a PNG Mask

<div class="masked-box">Hello</div>

.masked-box {
  width: 200px;
  height: 200px;
  background-color: #4caf50;

  mask-image: url('mask.png'); /* PNG with transparency */
  mask-repeat: no-repeat;
  mask-size: cover;
}

• The visible part of the box corresponds to the opaque area of mask.png.

• Transparent areas of the mask hide the box.

Note: -webkit-mask-image is needed for WebKit browsers (Chrome, Safari):

-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;

3. Mask with Gradients

You can create fade effects or reveal animations using gradients:

.masked-box {
  width: 300px;
  height: 100px;
  background-color: #2196f3;

  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

• Black = fully visible

• White or opaque = visible (depends on mode)

• Transparent = hidden

4. Masking with SVG

You can use an SVG shape as a mask:

<svg " height="0">
  <defs>
    <mask id="circle-mask">
      <rect " height="100%" fill="white"/>
      <circle cx="50" cy="50" r="40" fill="black"/>
    </mask>
  </defs>
</svg>

<div class="masked-box">Masked Text</div>

.masked-box {
  width: 200px;
  height: 200px;
  background-color: orange;
  mask: url(#circle-mask);
  -webkit-mask: url(#circle-mask);
}

• Only the parts corresponding to white in the mask are visible.

5. Masking Properties Overview

6. Animating Masks

You can create cool reveal effects by animating the mask:

@keyframes reveal {
  from { mask-position: -100% 0; -webkit-mask-position: -100% 0; }
  to { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
}

.masked-box {
  width: 300px;
  height: 100px;
  background-color: red;
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
  animation: reveal 2s infinite linear;
}

7. Key Notes

• Masking is different from clip-path:

  • clip-path only allows geometric shapes.

  • mask can use images, gradients, and multiple layers.

• Always include -webkit- prefix for better browser support.

• Can be combined with transitions and animations for dynamic effects.