CSS Masks

CSS masking enables you to reveal or hide parts of an element selectively by applying one or more mask images to it. These mask images can be gradients, images, or SVG sources

mask is a shorthand for other properties, such as mask-image.

Can be useful as a strategy of creating a colourable icon set. This uses mask-image to load the SVG, and sets the colour with background-color:

.icon {
  background: black;
  mask: var(--arrow) center center / 100% auto no-repeat;
  /** other props... */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_masking/Masking

[[css]]