This is the Standard reference for compositing.
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.
opacity
Interactive example.
Prefixes: opacity. Example: opacity:0. It emits opacity:0%;.
Documented values (15)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100
mix-blend-mode
Interactive example.
Prefixes: mix-blend-mode. Example: mix-blend-mode:normal. It emits mix-blend-mode:normal;.
Documented values (17)
normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion,
hue, saturation, color, luminosity, plus-lighter
background-blend-mode
Interactive example.
Prefixes: bg-blend-mode. Example: bg-blend-mode:normal. It emits background-blend-mode:normal;.
Documented values (17)
normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion,
hue, saturation, color, luminosity, plus-lighter
isolation
Interactive example.
Prefixes: isolation. Example: isolation:auto. It emits isolation:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
auto, isolate