Backgrounds

Background Blend

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

Class

class	css
bg-blend-normal	background-blend-mode: normal
bg-blend-multiply	background-blend-mode: multiply
bg-blend-screen	background-blend-mode: screen
bg-blend-overlay	background-blend-mode: overlay
bg-blend-darken	background-blend-mode: darken
bg-blend-lighten	background-blend-mode: lighten
bg-blend-color	background-blend-mode: color
bg-blend-color-dodge	background-blend-mode: color-dodge
bg-blend-color-burn	background-blend-mode: color-burn
bg-blend-hard-light	background-blend-mode: hard-light
bg-blend-soft-light	background-blend-mode: soft-light
bg-blend-difference	background-blend-mode: difference
bg-blend-exclusion	background-blend-mode: exclusion
bg-blend-hue	background-blend-mode: hue
bg-blend-saturation	background-blend-mode: saturation
bg-blend-luminosity	Wbackground-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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.