Masking – mask

CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element.

This property is a shorthand for the following CSS properties:

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size

Possible Values

none − This value removes the masking effect.
<mask-reference> − Sets the image source for the mask. Refer mask-image.
<masking-mode> − Determines whether an alpha or luminance mask should be applied to the mask reference specified by mask-image. Refer mask-mode.
<position> − Determines the initial position for each defined mask image relative to the mask position layer set by mask-origin. Refer mask-position.
<bg-size> − Defines the size of the mask image. Refer mask-size.
<repeat-style> − Determines how the mask image are repeated. Refer mask-repeat.
<geometry-box> − A single <geometry-box> value sets both mask-origin and mask-clip. If two values are present, the first sets the mask-origin and second mask-clip.
<geometry-box> | no-clip − Determines the area affected by the mask-image.
<compositing-operator> − This value specifies the compositing operation to be applied on the current mask layer. Refer mask-composite.

Applies to

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements

Syntax

Keyword Values

mask: none;

Image Values

mask: url(shop.png);
mask: url(book.svg#star)

Combined Values

mask: url(heart.png) luminance; 
mask: url(heart.png) 40px 20px; 
mask: url(heart.png) 10px 10px / 100px 50px; 
mask: url(heart.png) repeat-y; 
mask: url(heart.png) border-box; 
mask: url(masks.svg#star) exclude;

CSS mask – none Value

The following example demonstrates that the mask: none property removes applied masking effect from the element −

<html><head><style>
   .mask-none {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-color: red;
      -webkit-mask: url(images/heart.png);
      -webkit-mask-size: 100% 100%;
   }
</style></head><body><h2>Image with masking effect</h2><div class="mask-none"></div><h2>Image without masking effect</h2><div class="mask-none" style="mask:none"></div></body></html>

CSS mask – <mask-reference>

The following example demonstrates that the mask: URL() property sets the image source as a mask layer for the div element −

<html><head><style>
   .mask-url {
   width: 200px;
   height: 200px;
   background-image: url("images/pink-flower.jpg");
   background-size: cover;
   -webkit-mask: url(images/heart.png);
   -webkit-mask-size: 100% 100%;
   }
</style></head><body><div class="mask-url"></div></body></html>

CSS mask – <masking-mode>

The following example demonstrates that the -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; property, creates a colorful gradient mask along with luminance value that affects the brightness of the image −

<html><head><style>
   img {
      display: block;
      width: 200px; 
      height: 200px;
      -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
   }
</style></head><body><img src="images/pink-flower.jpg" alt="pink-flower"></body></html>

CSS mask – <position>

The following example demonstrates the mask image using the url(images/heart.png) value and the 40px 20px values to set the position of the mask −

<html><head><style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) 40px 20px;
      -webkit-mask-size: 100% 100%;
   }
</style></head><body><div class="mask-container"></div></body></html>

CSS mask – <bg-size>

The following example demonstrates the mask image using the url(images/heart.png) value and 10px 10px values position the mask image, and 100px 50px sets the size of the mask −

<html><head><style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) 10px 10px / 100px 50px;
      -webkit-mask-size: 100% 100%;
   }
</style></head><body><div class="mask-container"></div></body></html>

CSS mask – <repeat-style>

The following example demonstrates the mask image using the url(images/heart.png) value and repeat-y value indicates that the mask image should be repeated vertically −

<html><head><style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) repeat-y;
      -webkit-mask-size: 50px;
      -webkit-mask-position: center;
   }
</style></head><body><div class="mask-container"></div></body></html>

CSS mask – <geometry-box>

The following example demonstrates the mask image using the url(images/shop.png) value and border-box value indicates that mask image is positioned and sized relative to the element’s border-box including border and padding −

<html><head><style>
   .container {
      width: 250px;
      height: 200px;
      background-color: greenyellow;
      padding: 10px;
   }
   .masking-image {
      height: 120px;
      border: 20px solid red;
      padding: 10px;
      background-color: violet;

      -webkit-mask: url('images/shop.png') border-box;
      -webkit-mask-size: cover;
      -webkit-mask-repeat: no-repeat;
   }
</style></head><body><p>The image has a violet background, and the red border around it. The areas outside the border will remain visible.</h3><div class="container"><div class="masking-image"></div></div></body></html>

CSS mask – <geometry-box> | no-clip

The following example demonstrates the mask image using the url(images/bookmark.png) value.

The content-box value indicates that mask image is positioned and sized relative to the element’s content-box and no-clip value prevents the mask image from being clipped to the element’s content box.

<html><head><style>
   .box {
      max-width: 300px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 220px;
      height: 220px;
      border: 20px solid red;
      -webkit-mask: url(images/bookmark.png) content-box no-clip;
      -webkit-mask-position: center center;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 100px 100px;
   }
</style></head><body><div class="box"><div class="mask-container"><img src="images/pink-flower.jpg" alt="pink flower" width="100%"></div></div></body></html>

CSS mask – Related Properties

Following is the list of CSS properties related to mask:

property	value
mask-clip	Defines the area of an element that is affected by a mask.
mask-composite	Defines the area of an element that is affected by a mask.
mask-image	Display or hide specific areas of an element.
mask-position	Determines where a mask image is placed on an element.
mask-repeat	Repetition of an image along horizontal axis, vertical axis, both the axes, or not at all.
mask-size	Defines the size of the mask image.
mask-origin	Defines the origin of the mask image.
mask-mode	Defines whether the mask reference given by mask-image should be considered as a luminance or alpha mask.
mask-border	Creates a mask along the edge of an element’s border.
mask-border-mode	Specifies the blending mode used in mask border.
mask-border-outset	Specifies the distance by which an element’s mask border is set out from its border box.
mask-border-repeat	Sets how the edges of a source image are adjusted to fit the dimensions of an element’s mask border.
mask-border-slice	Divides the image set by mask-border-source into regions.
mask-border-source	Sets the source image used to create an element’s mask border.
mask-border-width	Sets the width of an element’s mask border.