CSS

CSS (Cascading Style Sheets) is the language that brings web pages to life with colors, layouts, and animations. It works alongside HTML to create visually stunning and responsive designs. Let's explore the power of CSS.

CSS Masking

1 April 2025 | Category:

CSS masking is a technique that allows you to control the visibility of an element by using a mask image or a shape. It enables you to create complex visual effects, such as hiding parts of an element or revealing only specific portions. This is useful when you want to create intricate designs without needing to use complex HTML or image editing software.

CSS masking works similarly to CSS clipping, but it uses an image or gradient to determine which parts of an element are visible.

🔹 1. Syntax of CSS Masking

element {
  mask: <mask-image> <mask-mode> <mask-position> <mask-size> <mask-repeat>;
}

Properties:

  • mask-image: Specifies the mask image or gradient that will be used for masking the element.
  • mask-mode: Defines how the mask image is applied to the element. It can be either luminance (default) or alpha.
  • mask-position: Determines the position of the mask image.
  • mask-size: Specifies the size of the mask image.
  • mask-repeat: Controls whether the mask image should repeat if it doesn’t cover the entire element.

🔹 2. Mask Types

1. Mask with Image

You can use an image to mask an element. The image determines which parts of the element will be visible and which parts will be hidden.

Example: Masking with an Image

img {
  width: 300px;
  height: 200px;
  mask-image: url('mask.png');
  -webkit-mask-image: url('mask.png'); /* For compatibility with Safari */
}

Here, the image mask.png will be used as the mask for the image. The areas of the image that are black will hide the corresponding areas of the img element, and the areas that are white will make the img element visible.

2. Mask with Gradient

You can also use CSS gradients to create a mask, which is useful for effects like fading out content.

Example: Masking with a Gradient

div {
  width: 300px;
  height: 200px;
  background-color: red;
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); /* For Safari */
}

In this example, the element will have a red background, and the bottom half will be transparent, creating a fading effect.

🔹 3. Masking with Multiple Images

You can also combine multiple mask images to create more complex effects. This can be done using a comma-separated list of images.

Example: Masking with Multiple Images

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  mask-image: url('mask1.png'), url('mask2.png');
  -webkit-mask-image: url('mask1.png'), url('mask2.png'); /* For Safari */
}

In this case, two mask images are applied to the element. The first mask image (mask1.png) will be applied first, and the second mask image (mask2.png) will overlay it.

🔹 4. mask-mode Property

The mask-mode property defines how the mask is applied:

  • luminance (default): Uses the luminance (lightness) values of the mask image (light areas are visible, dark areas are hidden).
  • alpha: Uses the alpha (opacity) values of the mask image (opaque areas are visible, transparent areas are hidden).

Example: Using mask-mode

div {
  width: 300px;
  height: 200px;
  background-color: green;
  mask-image: url('mask.png');
  mask-mode: alpha; /* Use the alpha channel (opacity) of the mask */
  -webkit-mask-image: url('mask.png');
  -webkit-mask-mode: alpha; /* For Safari */
}

🔹 5. mask-position, mask-size, mask-repeat

You can control how the mask is positioned and sized within the element.

mask-position:

This property determines the starting position of the mask image. It can be set using values like top, center, bottom, left, right, or with specific coordinates.

Example: mask-position

div {
  width: 300px;
  height: 200px;
  background-color: yellow;
  mask-image: url('mask.png');
  mask-position: center; /* Centers the mask on the element */
}

mask-size:

This property defines the size of the mask image. You can use values like cover, contain, or specific sizes like pixels or percentages.

Example: mask-size

div {
  width: 300px;
  height: 200px;
  background-color: purple;
  mask-image: url('mask.png');
  mask-size: 100% 50%; /* Mask image size will cover 100% width and 50% height of the element */
}

mask-repeat:

This property controls whether the mask image should repeat to cover the element. It can be set to repeat, no-repeat, or space.

Example: mask-repeat

div {
  width: 300px;
  height: 200px;
  background-color: pink;
  mask-image: url('mask.png');
  mask-repeat: repeat-x; /* Repeat the mask image only horizontally */
}

🔹 6. Practical Example

Here’s a practical example where a circular mask is applied to an image, using a CSS gradient for the mask.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Masking Example</title>
  <style>
    .masked-image {
      width: 300px;
      height: 300px;
      background-image: url('https://via.placeholder.com/300');
      background-size: cover;
      mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
      -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    }
  </style>
</head>
<body>

  <div class="masked-image"></div>

</body>
</html>

In this example, a circular gradient mask is applied to the image. The center of the image remains fully visible, while the edges fade out, creating a smooth transition.

🔹 7. Browser Support

The mask property is supported by most modern browsers, including Chrome, Firefox, and Safari. However, some older browsers, especially Internet Explorer, do not fully support it. For full compatibility with older browsers, you may need to use vendor prefixes (-webkit-) or fallback techniques.

🔹 8. Conclusion

CSS Masking is a powerful technique to control the visibility of elements, creating sophisticated visual effects. By using mask-image, mask-mode, and other related properties, you can create a variety of effects such as image cropping, transparency, and complex shapes. Experimenting with different mask images, gradients, and positioning will help you achieve creative results in your web design.

Key Takeaways:

  • Use mask-image with images, gradients, or multiple layers.
  • Control the positioning and sizing of the mask with mask-position, mask-size, and mask-repeat.
  • Experiment with mask-mode to control how the mask is applied (luminance or alpha).