This is the Standard reference for masking.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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