Mix Blend Mode
Use mix-blend-* utilities to control how an element’s content and background blend with whatever is painted behind it in the same stacking context.
Style('flex justify-center -space-x-14', children: [ Style('bg-blue-500 mix-blend-multiply ...'), Style('bg-pink-500 mix-blend-multiply ...'),])Isolating blending
Section titled “Isolating blending”Use the isolate utility to start a new stacking context so children with mix-blend-* only blend with one another, not with content painted behind the parent.
Style('isolate flex justify-center -space-x-14', children: [ Style('bg-yellow-500 mix-blend-multiply ...'), Style('bg-green-500 mix-blend-multiply ...'),])Style('flex justify-center -space-x-14', children: [ Style('bg-yellow-500 mix-blend-multiply ...'), Style('bg-green-500 mix-blend-multiply ...'),])Class reference
Section titled “Class reference”| Class | Description |
|---|---|
mix-blend-normal | Set blend mode to normal |
mix-blend-multiply | Set blend mode to multiply |
mix-blend-screen | Set blend mode to screen |
mix-blend-overlay | Set blend mode to overlay |
mix-blend-darken | Set blend mode to darken |
mix-blend-lighten | Set blend mode to lighten |
mix-blend-color-dodge | Set blend mode to color-dodge |
mix-blend-color-burn | Set blend mode to color-burn |
mix-blend-hard-light | Set blend mode to hard-light |
mix-blend-soft-light | Set blend mode to soft-light |
mix-blend-difference | Set blend mode to difference |
mix-blend-exclusion | Set blend mode to exclusion |
mix-blend-hue | Set blend mode to hue |
mix-blend-saturation | Set blend mode to saturation |
mix-blend-color | Set blend mode to color |
mix-blend-luminosity | Set blend mode to luminosity |
mix-blend-plus-darker and mix-blend-plus-lighter are not yet supported — Flutter’s BlendMode enum has no equivalent for the CSS plus-darker / plus-lighter modes. Tracked in PLAYGROUND_PARITY.md.