PLAY CSS
jaen

Effects

mask-size

mask-size sets how large a mask image is drawn. It takes the same values as background-size: give a width and height directly, or use cover and contain to fit the element.

Syntax

<bg-size>#

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image: url(/mask-star.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 50%;
}

Controls

mask-size50%
mask-size
width
height

About

cover and contain

  • cover keeps the aspect ratio and picks the smallest size that covers the element with no gaps. Whatever overflows is unused.
  • contain keeps the aspect ratio and picks the largest size that fits the whole image. In the leftover space, the image repeats when mask-repeat is the initial repeat, and the element disappears with no-repeat.

Width and height

A single value sets the width and leaves the height auto, keeping the aspect ratio. Two values can distort the image. Percentages are relative to the area the mask is positioned in, which by default reaches the outer edge of the border (mask-origin: border-box), unlike backgrounds, which measure up to the padding. The initial value is auto, the image’s natural size.

Watch out

  • Where the mask image doesn’t reach, the element disappears. With a background image the background color would show there; with a mask nothing is painted.
  • mask-repeat starts as repeat, so a small size tiles the image. To cut out a single icon shape, pair it with no-repeat.
  • Gradients have no natural size, so auto fills the whole area.
  • Inside the mask shorthand, the size follows the position after a / (mask: url(star.svg) center / contain no-repeat).
  • Chrome and Edge support the name without -webkit- from version 120, and Safari from 15.4. For older browsers, write -webkit-mask-size.
  • The preview here masks the box with an image of a star on a transparent background (96×96), placed once in the center.

References

MDN Web Docsmask-sizeSpecificationCSS Masking Module Level 1Can I usemask-size

Comments

PLAY CSS