Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS Masking

The mask of an image or a word can be set using the CSS mask-image property. In CSS, it is used to create a mask layer for a certain element.

Syntax

 
mask-image: none | image | url | initial | inherit;

Example

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
    .img-mask {
        -webkit-mask-image: url('https://webtutor.dev/images/logo.png');
        mask-image: url('https://webtutor.dev/images/logo.png');
        -webkit-mask-size: 50%;
        mask-size: 50%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
</style>
</head>
<body>
​
<h1>The mask-image Property</h1>
​
<div class="img-mask">
    <img src="https://webtutor.dev/images/computer.jpg" alt="Computer" width="500" height="300">
</div>
​
</body>
</html>
Preview