A
AstraWind
v0.2.0
System
Effects

background-blend-mode

Utilities for controlling how an element's background image should blend with its background color.

Quick reference

No native equivalent: these classes are accepted and ignored
Class
Styles
React Native
bg-blend-color
background-blend-mode: color;
No native equivalent
bg-blend-color-burn
background-blend-mode: color-burn;
No native equivalent
bg-blend-color-dodge
background-blend-mode: color-dodge;
No native equivalent
bg-blend-darken
background-blend-mode: darken;
No native equivalent
bg-blend-difference
background-blend-mode: difference;
No native equivalent
bg-blend-exclusion
background-blend-mode: exclusion;
No native equivalent
bg-blend-hard-light
background-blend-mode: hard-light;
No native equivalent
bg-blend-hue
background-blend-mode: hue;
No native equivalent
bg-blend-lighten
background-blend-mode: lighten;
No native equivalent
bg-blend-luminosity
background-blend-mode: luminosity;
No native equivalent
bg-blend-multiply
background-blend-mode: multiply;
No native equivalent
bg-blend-normal
background-blend-mode: normal;
No native equivalent
Show all 16 classes
The React Native column is what AstraWind resolves each class to, computed live on this page with the current color scheme. Classes with no native equivalent are accepted without effect, and AstraWind warns about them in development. See Compatibility.
Previous
← mix-blend-mode
Next
mask-clip →