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