Backgrounds

Background Blend

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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.

<div class="bg-blend-normal bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-normal,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set multiply blending mode to background image.

<div class="bg-blend-multiply bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-multiply,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set screen blending mode to background image.

<div class="bg-blend-screen bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-screen,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set overlay blending mode to background image.

<div class="bg-blend-overlay bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-overlay,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set darken blending mode to background image.

<div class="bg-blend-darken bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-darken,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set lighten blending mode to background image.

<div class="bg-blend-lighten bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-lighten,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set color blending mode to background image.

<div class="bg-blend-color bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-color,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set color-dodge blending mode to background image.

<div class="bg-blend-color-dodge bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-color-dodge,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set color-burn blending mode to background image.

<div class="bg-blend-color-burn bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-color-burn,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set hard-light blending mode to background image.

<div class="bg-blend-hard-light bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-hard-light,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set soft-light blending mode to background image.

<div class="bg-blend-soft-light bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-soft-light,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set different blending mode to background image.

<div class="bg-blend-different bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-different,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set exclusion blending mode to background image.

<div class="bg-blend-exclusion bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-exclusion,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set hue blending mode to background image.

<div class="bg-blend-hue bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-hue,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set saturation blending mode to background image.

<div class="bg-blend-saturation bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-saturation
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set luminosity blending mode to background image.

<div class="bg-blend-luminosity bg-shade-amber-1 ... bg-auto bg-center bg-no-repeat ... height-48 width-full" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-blend-luminosity,
    .bg-shade-amber-1,
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS