Background Blend Mode

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

Class	CSS Output
`bg-blend-overlay`	`background-blend-mode: overlay; }`
`bg-blend-soft-light`	`background-blend-mode: soft-light; }`
`bg-blend-luminosity`	`background-blend-mode: luminosity; }`
`bg-blend-difference`	`background-blend-mode: difference; }`
`bg-blend-screen`	`background-blend-mode: screen; }`
`bg-blend-hue`	`background-blend-mode: hue; }`
`bg-blend-lighten`	`background-blend-mode: lighten; }`
`bg-blend-exclusion`	`background-blend-mode: exclusion; }`
`bg-blend-darken`	`background-blend-mode: darken; }`
`bg-blend-multiply`	`background-blend-mode: multiply; }`

bg-blend-overlay

background-blend-mode: overlay;

bg-blend-soft-light

background-blend-mode: soft-light;

bg-blend-luminosity

background-blend-mode: luminosity;

bg-blend-difference

background-blend-mode: difference;

bg-blend-screen

background-blend-mode: screen;

bg-blend-hue

background-blend-mode: hue;

bg-blend-lighten

background-blend-mode: lighten;

bg-blend-exclusion

background-blend-mode: exclusion;

bg-blend-darken

background-blend-mode: darken;

bg-blend-multiply

background-blend-mode: multiply;

Reference

MDN ↗