Background blend mode

Utilities for controlling the blending mode of an element's background


Class reference

ClassProperties
bg-blend-normalbackground-blend-mode: normal;
bg-blend-multiplybackground-blend-mode: multiply;
bg-blend-screenbackground-blend-mode: screen;
bg-blend-overlaybackground-blend-mode: overlay;
bg-blend-darkenbackground-blend-mode: darken;
bg-blend-lightenbackground-blend-mode: lighten;
bg-blend-color-dodgebackground-blend-mode: color-dodge;
bg-blend-color-burnbackground-blend-mode: color-burn;
bg-blend-hard-lightbackground-blend-mode: hard-light;
bg-blend-soft-lightbackground-blend-mode: soft-light;
bg-blend-differencebackground-blend-mode: difference;
bg-blend-exclusionbackground-blend-mode: exclusion;
bg-blend-huebackground-blend-mode: hue;
bg-blend-saturationbackground-blend-mode: saturation;
bg-blend-colorbackground-blend-mode: color;
bg-blend-luminositybackground-blend-mode: luminosity;

Use the .bg-blend-{ mode } utility classes to control of the blending of each layer in an element’s background.
This will affect both the background color and background image.

bg-blend-normal

bg-blend-multiply

bg-blend-screen

bg-blend-overlay

bg-blend-darken

bg-blend-lighten

bg-blend-color-dodge

bg-blend-color-burn

bg-blend-hard-light

bg-blend-soft-light

bg-blend-difference

bg-blend-exclusion

bg-blend-hue

bg-blend-saturation

bg-blend-color

bg-blend-luminosity

<div class="bg-teal bg-blend-{ mode }" style="background-image: url(...);"></div>

# Responsive

To control the background blend mode of an element at a specific breakpoint, add a {screen}: prefix to any existing background blend mode utility. For example, use md:bg-blend-overlay to apply the bg-blend-overlay utility at only medium screen sizes and above.

<div class="bg-teal bg-blend-lighten md:bg-blend-overlay" style="background-image: url(...);">
<!-- ... -->
</div>

# Hover

To control the background blend mode of an element on hover, add the hover: prefix to any existing background blend mode utility. For example, use hover:bg-blend-multiply to apply the bg-blend-multiply utility on hover.

<div class="bg-teal bg-blend-normal hover:bg-blend-multiply" style="background-image: url(...);">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.