This is the Standard reference for masking.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
clip-path
Interactive example.
Prefixes: clip-path. Example: clip-path:none. It emits clip-path:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, [circle(50%)], [inset(10%)], [polygon(0_0,100%_0,50%_100%)], $value
mask-image
Interactive example.
Prefixes: mask-image. Example: mask-image:none. It emits mask-image:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, [url(mask.svg)], $image
mask-position
Interactive example.
Prefixes: mask-position. Example: mask-position:top. It emits mask-position:top;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, 50%, 10px, [25%_75%],
$position
mask-size
Interactive example.
Prefixes: mask-size. Example: mask-size:auto. It emits mask-size:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
auto, cover, contain, 50%, 100px, [120px_60px], $size
mask-repeat
Interactive example.
Prefixes: mask-repeat. Example: mask-repeat:repeat. It emits mask-repeat:repeat;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
repeat, repeat-x, repeat-y, no-repeat, space, round, [repeat_space], $repeat
mask-origin
Interactive example.
Prefixes: mask-origin. Example: mask-origin:border-box. It emits mask-origin:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
border-box, padding-box, content-box, fill-box, stroke-box, view-box, [content-box], $origin
mask-clip
Interactive example.
Prefixes: mask-clip. Example: mask-clip:border-box. It emits mask-clip:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
border-box, padding-box, content-box, fill-box, stroke-box, view-box, no-clip, [content-box], $clip
mask-mode
Interactive example.
Prefixes: mask-mode. Example: mask-mode:alpha. It emits mask-mode:alpha;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
alpha, luminance, match-source, [alpha], $mode
mask-composite
Interactive example.
Prefixes: mask-composite. Example: mask-composite:add. It emits mask-composite:add;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
add, subtract, intersect, exclude, [add,_exclude], $composite
mask-type
Interactive example.
Prefixes: mask-type. Example: mask-type:luminance. It emits mask-type:luminance;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
luminance, alpha, [alpha], $type