The mask shorthand sets all mask layer properties together: mask image, position, size, repeat, clipping area, origin area, compositing operator, and mask mode (alpha/luminance). Resets mask-border properties to their initial values..faded {
mask: url("shape.svg");
}.text-clip {
mask: linear-gradient(black, transparent) center / cover no-repeat;
}noneNo mask image.topPosition the mask at the top edge.rightPosition the mask at the right edge.bottomPosition the mask at the bottom edge.leftPosition the mask at the left edge.centerPosition the mask at the center.autoFrom mask-size: automatic size based on source dimensions.coverFrom mask-size: covers the entire mask area while preserving aspect ratio.containFrom mask-size: fits within the mask area while preserving aspect ratio.repeatRepeat on both axes.repeat-xRepeat on X axis only.repeat-yRepeat on Y axis only.no-repeatNo repeat.spaceRepeat with even spacing, no clipping.roundRepeat with scaling to avoid half images.border-boxBorder box area.padding-boxPadding box area.content-boxContent box area.margin-boxMargin box area.fill-boxSVG fill bounding box.stroke-boxSVG stroke bounding box.view-boxSVG viewBox.no-clipNo clipping — mask is allowed to paint outside the box.addMask layers are combined additively.subtractLower layer subtracts from upper.intersectIntersection of mask layers.excludeOverlapping areas are excluded.alphaAlpha channel of mask image is used as mask.luminanceLuminance values of mask image are used as mask.match-sourceMode determined by source type (alpha for PNG, luminance for SVG).url()Loads a mask image by URI, or references an SVG element.linear-gradient()Linear gradient as mask image.radial-gradient()Radial gradient as mask image.conic-gradient()Conic gradient as mask image.CSS Masking Module Level 1Editor's Draft<image> <position>W3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
