CSS 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:

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.
Advertisements