Mix blend mode

Utilities for controlling the blend mode of an element


Class reference

ClassProperties
blend-normalmix-blend-mode: normal;
blend-multiplymix-blend-mode: multiply;
blend-screenmix-blend-mode: screen;
blend-overlaymix-blend-mode: overlay;
blend-darkenmix-blend-mode: darken;
blend-lightenmix-blend-mode: lighten;
blend-color-dodgemix-blend-mode: color-dodge;
blend-color-burnmix-blend-mode: color-burn;
blend-hard-lightmix-blend-mode: hard-light;
blend-soft-lightmix-blend-mode: soft-light;
blend-differencemix-blend-mode: difference;
blend-exclusionmix-blend-mode: exclusion;
blend-huemix-blend-mode: hue;
blend-saturationmix-blend-mode: saturation;
blend-colormix-blend-mode: color;
blend-luminositymix-blend-mode: luminosity;

Use .blend-{ mode } utility classes to overlay and mix an element with it’s background. Isolation utility classes can be used to prevent elements inheriting the mix-blend-mode, check out the Isolation documentation.

<div class="col-span-1">

blend-normal

blend-multiply

blend-screen

blend-overlay

blend-darken

blend-lighten

blend-color-dodge

blend-color-burn

blend-hard-light

blend-soft-light

blend-difference

blend-exclusion

blend-hue

blend-saturation

blend-color

blend-luminosity

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

# Responsive

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

<div class="blend-lighten md:blend-overlay ...">
<!-- ... -->
</div>

# Hover

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

<div class="blend-normal hover:blend-multiply"">
<!-- ... -->
</div>

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