CSS - mask Property

Quiz

CSS mask property masks and displays an image at a particular position to partially or completely hide an element. The property is a shorthand for the CSS properties: mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat and mask-size

Syntax

mask: <mask-image> <mask-mode> <mask-composite> <mask-clip> <mask-origin> <mask-position> <mask-repeat> <mask-size> | initial | inherit;

Property Values

Value	Description
mask-image	It specifies an image for the mask layer for an element. Default value is none.
mask-mode	It specifies whether the mask layer image should be luminance mask or alpha mask. Default value is match-source.
mask-composite	It specifies a compositing operation used on the current mask layer with the below mask layers. Default value is add.
mask-clip	It specifies the area affected by a mask image. Default value is border-box.
mask-origin	It specifies the origin position of a mask layer image. Default value is border- box.
mask-position	It sets the starting position of a mask image relative to the mask position area. Default value is 0% 0%.
mask-repeat	It specifies how a mask image will be repeated. Default value is repeat.
mask-size	It specifies the size of the mask layer image. Default value is auto.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Property

The following examples explain the mask property with different values.

Defining Multiple Values using Mask Property

The mask property is a shorthand property for eight properties. Some of the properties are optional and may not be needed. In the following example five properties' values have been defined namely: mask-image, mask-mode, mask-repeat, mask-position and mask-size.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask: url('/css/images/logo.png') 
               no-repeat no-repeat 45% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask:
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Constiutent Properties of Mask Property

The mask property is a shorthand property for eight properties. These eight properties can be used individually to produce the same effect produced by the mask proeprty. Some properties have been used individually in the following example to show the same effect as in the above example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask-image: url('/css/images/logo.png');
         mask-mode: no-repeat;
         mask-repeat: no-repeat;
         mask-position: 45%;
         mask-size: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask-image: url("logo")
   </h4>
   <h4>
      mask-mode: no-repeat
   </h4>
   <h4>
      mask-repeat: no-repeat
   </h4>
   <h4>
      mask-position: 45%
   </h4>
   <h4>
      mask-size: 50%
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>image used:</h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Mask Property with Gradients

The mask property can be used with gradients, to produce visual effects. In the following example linear-gradient and radial-gradient have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked1 {
         mask: linear-gradient(to right bottom, black, transparent);
      }

      .masked2 {
         mask: radial-gradient(circle, black 35%, rgba(0, 0, 0, 0.5) 60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask: linear-gradient 
      (to right bottom, black, transparent)
   </h4>
   <div class="masked1">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      mask: radial-gradient
      (circle, black 35%, rgba(0, 0, 0, 0.5) 60%)
   </h4>
   <div class="masked2">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Supported Browsers

Property
mask	120	120	53	15.4	106

css_reference.htm

Print Page