mask-size

Sets the size of the mask image. You can use keywords like 'cover' or 'contain', or specific pixel/percentage values, just like 'background-size'.

Quick example

.masked-element {
  /* Scales the mask image to cover the entire element */
  mask-size: cover;
}

Quick facts

Initial value
auto
Inherited
No
Applies to
all elements and SVG container elements
Animation type
repeatableList

mask-size Browser Support

Widely availableSince 202388% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

120+
53+
15.4+
120+
ESC