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

<!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

CSS object-position

CSS Multiple Columns

CSS Masking

Syntax

Example

Links

Tutorials

Connect with us