Skip to main content

Introduction to CSS Masking

CSS Masking​

The CSS mask-image property is used to apply an image or SVG graphic as a mask over an element. It works by hiding parts of the element based on the alpha channel of the mask image.

As an example:

.element {
  background-image: url("background-image.jpg");
  mask-image: url("mask-image.svg");
  mask-mode: alpha; /* Determines the blending mode */
  mask-position: center; /* Sets the position of the mask */
  mask-size: cover; /* Determines the size of the mask */
}

In this example:

  • The background-image property sets the background image of the element, while the mask-image property sets the mask image to be applied.
  • The mask-mode property determines the blending mode of the mask and the element, while mask-position and mask-size determine the position and size of the mask, respectively.

Use an Image as the Mask Layer​

To use an image as the mask layer, you can follow these steps:

  • Open the image you want to use as a mask layer in an image editing software like Adobe Photoshop or GIMP.

  • Create a new layer above the image layer and fill it with the color or gradient you want to use as the background.

  • Drag the image layer onto the new layer to create a clipping mask.

  • In the Layers panel, click on the image layer to select it.

  • Click on the "Add Layer Mask" button at the bottom of the Layers panel to add a mask to the layer.

  • In the Layers panel, make sure the mask is selected and choose "Image" from the drop-down menu in the Properties panel.

  • Choose the image you want to use as the mask layer and adjust the settings as needed.

  • Use the brush tool to paint on the mask layer to reveal or hide parts of the image.

  • Save the image as a PNG or TIFF file to preserve the transparency of the mask layer.

By following these steps, you can use an image as a mask layer to create interesting and unique effects in your designs.

Example​

<!DOCTYPE html>
<html>
  <head>
    <title>Image Mask Example</title>
    <style>
      .mask-image {
        position: relative;
        display: inline-block;
        -webkit-mask-image: url("mask.png");
        mask-image: url("mask.png");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: cover;
      }

      .mask-image img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      .mask-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2em;
        color: white;
        text-align: center;
        text-shadow: 1px 1px 1px black;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="mask-image">
      <img src="image.jpg" alt="Image" />
      <div class="mask-text">Hello World!</div>
    </div>
  </body>
</html>

CSS Masking Properties​

The following table lists all the CSS masking properties:

PropertyDescription
mask-imageSpecifies an image to be used as a mask layer for an element
mask-modeSpecifies whether the mask layer image is treated as a luminance mask or as an alpha mask
mask-originSpecifies the origin position (the mask position area) of a mask layer image
mask-positionSets the starting position of a mask layer image (relative to the mask position area)
mask-repeatSpecifies how the mask layer image is repeated
mask-sizeSpecifies the size of a mask layer image