Background

Background Blend

Utilities for sets the blending mode of each background layer (color or image).


Class

classcss
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-colorbackground-blend-mode: color
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-luminosityWbackground-blend-mode: luminosity

Usage

Set normal blending mode background image with HTML inline attribute style="..." and a CSS property background-image: url(...) to an element.

<!-- Example -->
<y class="bg-amber-600 bg-blend-normal ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set multiply blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-multiply ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set screen blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-screen ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set overlay blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-overlay ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set darken blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-darken ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set lighten blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-lighten ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set color blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set color-dodge blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color-dodge ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set color-burn blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color-burn ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set hard-light blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-hard-light ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set soft-light blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-soft-light ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set different blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-different ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set exclusion blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-exclusion ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set hue blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-hue ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set saturation blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-saturation ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Set luminosity blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-luminosity ... bg-auto bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)">
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visibleYes
focus-withinYes
active
visited
checked
disabled