CSS - mask-composite Property

CSS mask-composite property defines how a mask image is composited with othe mask layer images. It specifies how the mask layers interact with each other, particularly when multiple mask layers are used.

Syntax

mask-composite: add | subtract | intersect | exclude | initial | inherit;

Property Values

Value	Description
add	It combines mask layers by placing the top mask above the bottom mask. Default.
subtract	It removes the parts of the top mask from the bottom mask, making areas where the top mask is present more transparent.
intersect	It shows only the areas where both masks overlap.
exclude	It hides the areas where the masks overlap and shows only the parts where the masks do not overlap.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Composite Property

The following examples explain the mask-composite property with different values.

Mask Composite Property with Add Value

To combine different mask images so that the top mask image is added to the bottom mask image, we use the add value. Any area covered by either mask will be visible. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: add;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: add
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

Mask Composite Property with Subtract Value

To combine different mask images so that the parts of the top mask from the bottom mask, we use the subtract value. It makes the areas where the top mask is present more transparent. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: subtract;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: subtract
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

Mask Composite Property with Intersect Value

To combine different mask images so that only the areas where both masks overlap are highlighted, we use the intersect value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: intersect;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: intersect
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

Mask Composite Property with Exclude Value

To combine different mask images so that the areas where the masks overlap is hidden and shows only the parts where the masks do not overlap, we use the exclude value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: exclude;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: exclude
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

Supported Browsers

Property
mask-composite	120	120	53	15.4	106

css_reference.htm

Print Page