CSS mask-image Property

The mask-image property in CSS is used to set the mask of an image or a text. It is used to form a mask layer for a particular element in CSS.

Syntax:

mask-image: none | <mask-source>

• none: No mask layer is set and a transparent black layer is set.
  

Syntax:

mask-image: none

Example:

In this example, no mask is created.

Output:

👁 Image

<mask-source>: Used to give the source of the image url.

Syntax:

mask-image: url();

Example :

The icon is a mask over background color which is black. It can be changed as required.

Output:

👁 Image

Browsers supported:

• Chrome 1
• Edge 79
• Firefox 53
• Opera 15
• Safari 15.4