mix-blend-mode
Controls how an element blends with the content beneath it, similar to layer blend modes in image editors.
86 effects in the catalog use this property.
Syntax
mix-blend-mode: multiply | screen | overlay | difference | ...;Watch out
Blending only happens within the relevant stacking context. If the result looks wrong, check whether an ancestor with `isolation: isolate` is separating the layers.
Common values
screen- Lightens; useful for glows on dark surfaces
multiply- Darkens; useful for ink and shadow effects
difference- Inverts against the backdrop; useful for cursors and masks
Effects using mix-blend-mode
These are working effects from the catalog. Open a tile to inspect the full source.