Background Blend Mode

Use bg-blend-* utilities to blend an element’s background image with its background color, creating tinted-photo effects without an image editor.

Style('bg-blue-500 bg-blend-multiply ...')
Style('bg-blue-500 bg-blend-soft-light ...')
Style('bg-blue-500 bg-blend-overlay ...')

Class reference

Class	Description
`bg-blend-normal`	Set background blend mode to normal
`bg-blend-multiply`	Set background blend mode to multiply
`bg-blend-screen`	Set background blend mode to screen
`bg-blend-overlay`	Set background blend mode to overlay
`bg-blend-darken`	Set background blend mode to darken
`bg-blend-lighten`	Set background blend mode to lighten
`bg-blend-color-dodge`	Set background blend mode to color-dodge
`bg-blend-color-burn`	Set background blend mode to color-burn
`bg-blend-hard-light`	Set background blend mode to hard-light
`bg-blend-soft-light`	Set background blend mode to soft-light
`bg-blend-difference`	Set background blend mode to difference
`bg-blend-exclusion`	Set background blend mode to exclusion
`bg-blend-hue`	Set background blend mode to hue
`bg-blend-saturation`	Set background blend mode to saturation
`bg-blend-color`	Set background blend mode to color
`bg-blend-luminosity`	Set background blend mode to luminosity