CSS Masking - mask-position Property

CSS mask-position property in CSS is used to specify the positioning of a mask image within an element. The mask image is typically defined using the mask-image property, and mask-position allows you to control where the mask image is placed within the element's box, relative to the mask position layer set by mask-origin property.

Possible Values

  • top − Sets mask image on the top side of an element.

  • bottom − The mask image at the bottom side of an element.

  • right − The mask image on the right side of an element.

  • left − The mask image on the left side of an element.

  • center − The mask image at the center of an element.

  • <position> − specifies one to four values for a 2D position in regards to the edges of the element's box. Both relative and absolute offsets can be specified. The position can be set outside the element's box.

Applies to

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

Syntax

Keyword Values

mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

<position> Values

mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

CSS mask-position - top left Values

The following example demonstrates that mask-position: top left property positions the mask image on the top left side of the element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: top left;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: top left</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: top left</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position - top right Values

The following example demonstrates that mask-position: top right property positions the mask image on the top right side of an element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block;
      border: 2px solid red; 
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: top right;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: top right</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: top right</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position - bottom left Values

The following example demonstrates that mask-position: bottom left property positions the mask image on the bottom left side of an element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: bottom left;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: bottom left</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: bottom left</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position - bottom right Values

The following example demonstrates that mask-position: bottom right property positions the mask image on the bottom right side of an element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block;
      border: 2px solid red; 
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: bottom right;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: bottom right</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: bottom right</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position - center Value

The following example demonstrates that mask-position: center property positions the mask image at the center of an element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: center</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: center</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position - <position>

The following example demonstrates that mask-position: 30% 20%; property positions the mask image 30% from the left edge and 20% from the top edge of an element −

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: 30% 20%;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: 30% 20%;</h3>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: 30% 20%;</h3>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.   
         </div>
      </div>
   </div>
</body>
</html>
Advertisements