CSS mask

The mask property in CSS allows you to specify an image or SVG to act as a mask layer for an element. This can be useful for creating interesting visual effects or for revealing parts of an element based on the content of the mask.

To use the mask property, you first need to define an image or SVG that will be used as the mask. This can be done by setting the url() function to the desired image or SVG file. Here's an example:

    <div class="masked-element">Masked Element</div>

    
  

In the example above, we have a div with the class masked-element that has a red background color. We are using the -webkit-mask-image property for webkit browsers and mask-image for other browsers to apply the mask to the element. The mask image is defined using the url() function.

It's important to note that the mask image will be scaled to fit the size of the element it's being applied to. You can also control the position and size of the mask using additional properties like mask-position, mask-size, and mask-repeat.

Here's an example of using the mask property with an SVG mask:

    <div class="masked-element-svg">SVG Masked Element</div>

    
  

In this example, we have applied an SVG mask to the element div with the class masked-element-svg. The mask is defined by the url() function pointing to an SVG file. The background color of the element is blue, and the mask will reveal the blue background color in the shape defined by the SVG mask.

Experiment with different mask images and properties to create unique and visually appealing effects on your elements using the mask property in CSS.