<?xml version="1.0" encoding="utf-8"?>

CSS mask-image property

CSS mask-image property Bad Practice
CSS mask-image property Best Practice

The mask-image property sets the image used as a mask layer. With this layer, you can hide some portions of an element while revealing others. In the example, we set a photographic background as the element's background and added a heart-shaped SVG graphic as a mask layer.

The image type should support transparency, so your best options are SVG and PNG. Use the url() function to set the address of the image you want to use as a mask.

Top contributors

Topics

From Lesson

Share

Improve your UX & Product skills with interactive courses that actually work