CSS Masking

CSS Tutorial

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

CSS Advanced

CSS Responsive

CSS Grid

CSS masking creates a mask layer to place over an element to partially or fully hide portions of the element.

The CSS mask-image Property

The CSS mask-image property defines a mask layer image.

The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element.

Use an Image as the Mask Layer

PNG or an SVG image is used as the mask layer, a url() value is passed in the mask layer image.

The mask image (a PNG image) is used:

HTML

				
					<h1>The mask-image Property</h1>
<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img fetchpriority="high" decoding="async" src="img_5te.jpg" alt="css mask" width="600" height="400">
</div>
<h3>Original image:</h3>
<img fetchpriority="high" decoding="async" src="img_5te.jpg" alt="css mask" width="600" height="400">

CSS

				
					.mask1 {
  -webkit-mask-image: url(wlogo.png);
  mask-image: url(wlogo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}

Output

Example Explained

The mask-image property defines the image that has to be used as a mask layer for an element.

The mask-repeat property defines if or how a mask image is to be repeated. The no-repeat value denotes that the mask image is not repeated.

Use Gradients as the Mask Layer

CSS linear and radial gradients is used as mask images.

Linear Gradient Examples

A linear-gradient is used as the mask layer for our image. This linear gradient moves from top (black) to bottom (transparent):

HTML

				
					<h1>The mask-image Property</h1>
<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img fetchpriority="high" decoding="async" src="img_5te.jpg" alt="css mask" width="600" height="400">
</div>
<h3>Original image:</h3>
<img fetchpriority="high" decoding="async" src="img_5te.jpg" alt="css mask" width="600" height="400">

CSS

				
					.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Output

Use a linear gradient along with text masking as a mask layer:

HTML

				
					<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>

CSS

				
					p {
  font-size: 20px;
  padding: 20px;
  color: black;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(https://alanmajchrowicz.com/wp-content/uploads/2019/01/glacier_peak_image_lake_58240.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Output

Use a linear gradient along with text masking as a mask layer:

HTML

				
					<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>

CSS

				
					p {
  font-size: 20px;
  padding: 20px;
  color: black;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(https://alanmajchrowicz.com/wp-content/uploads/2019/01/glacier_peak_image_lake_58240.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Output

Radial Gradient

A radial-gradient (shaped as a circle) is used as the mask layer for the image:

HTML

				
					<h1>The mask-image Property</h1>
<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img loading="lazy" decoding="async" src="nature.jpg" alt="css mask" width="600" height="400">
</div>
<h3>Original image:</h3>
<img loading="lazy" decoding="async" src="nature.jpg" alt="css mask" width="600" height="400">

CSS

				
					.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Output

Radial Gradient as Ellipse

CSS

				
					.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Output

Use SVG as the Mask Layer

The SVG element is specified within an SVG graphic to generate masking effects.

Using the SVG element creates different mask layers for the image:

HTML

				
					<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as a triangle):</h3>
<svg width="600" height="200">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
<h3>Original image:</h3>
<img loading="lazy" decoding="async" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

Output

An SVG mask layer (formed as a star):

HTML

				
					<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as a star):</h3>
<svg width="600" height="200">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img loading="lazy" decoding="async" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

Output

An SVG mask layer (formed as a circle):

HTML

				
					<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as circles):</h3>
<svg width="600" height="200">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="180" cy="240" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="130" r="56"></circle>
  </mask>
  <image xmlns:xlink="nature,jpg" mask="url(#svgmask3)"></image>
</svg>
<h3>Original image:</h3>
<img loading="lazy" decoding="async" src="https://th.bing.com/th/id/OIP.zsEgRepQ6Uh5OYkkhJyn2gHaE5?w=271&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="Cinque Terre" width="600" height="400">

Output