0build.dev
Choose a layout

background-blend-mode

Report an Issue
Class Description

bg-blend-normal

Sets the background blend mode to normal.

CSS Rules 

.bg-blend-normal {
  background-blend-mode: normal;
}

Usage 

<element class="bg-blend-normal" />

Responsive

Prefix .bg-blend-normal utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-normal" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-normal:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-normal:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-normal::before" />

<element class="content-after bg-blend-normal::after" />
 .bg-blend-normal Sets the background blend mode to normal.

bg-blend-multiply

Sets background-blend-mode: multiply.

CSS Rules 

.bg-blend-multiply {
  background-blend-mode: multiply;
}

Usage 

<element class="bg-blend-multiply" />

Responsive

Prefix .bg-blend-multiply utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-multiply" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-multiply:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-multiply:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-multiply::before" />

<element class="content-after bg-blend-multiply::after" />
 .bg-blend-multiply Sets background-blend-mode: multiply.

bg-blend-screen

Sets the background blend mode to screen.

CSS Rules 

.bg-blend-screen {
  background-blend-mode: screen;
}

Usage 

<element class="bg-blend-screen" />

Responsive

Prefix .bg-blend-screen utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-screen" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-screen:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-screen:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-screen::before" />

<element class="content-after bg-blend-screen::after" />
 .bg-blend-screen Sets the background blend mode to screen.

bg-blend-overlay

Sets background-blend-mode: overlay.

CSS Rules 

.bg-blend-overlay {
  background-blend-mode: overlay;
}

Usage 

<element class="bg-blend-overlay" />

Responsive

Prefix .bg-blend-overlay utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-overlay" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-overlay:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-overlay:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-overlay::before" />

<element class="content-after bg-blend-overlay::after" />
 .bg-blend-overlay Sets background-blend-mode: overlay.

bg-blend-darken

Sets the background blend mode to darken.

CSS Rules 

.bg-blend-darken {
  background-blend-mode: darken;
}

Usage 

<element class="bg-blend-darken" />

Responsive

Prefix .bg-blend-darken utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-darken" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-darken:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-darken:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-darken::before" />

<element class="content-after bg-blend-darken::after" />
 .bg-blend-darken Sets the background blend mode to darken.

bg-blend-lighten

Sets the background blend mode to lighten.

CSS Rules 

.bg-blend-lighten {
  background-blend-mode: lighten;
}

Usage 

<element class="bg-blend-lighten" />

Responsive

Prefix .bg-blend-lighten utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-lighten" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-lighten:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-lighten:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-lighten::before" />

<element class="content-after bg-blend-lighten::after" />
 .bg-blend-lighten Sets the background blend mode to lighten.

bg-blend-color-dodge

Sets the background blend mode to color-dodge.

CSS Rules 

.bg-blend-color-dodge {
  background-blend-mode: color-dodge;
}

Usage 

<element class="bg-blend-color-dodge" />

Responsive

Prefix .bg-blend-color-dodge utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-color-dodge" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-color-dodge:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-color-dodge:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-color-dodge::before" />

<element class="content-after bg-blend-color-dodge::after" />
 .bg-blend-color-dodge Sets the background blend mode to color-dodge.

bg-blend-color-burn

Sets the background blend mode to color-burn.

CSS Rules 

.bg-blend-color-burn {
  background-blend-mode: color-burn;
}

Usage 

<element class="bg-blend-color-burn" />

Responsive

Prefix .bg-blend-color-burn utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-color-burn" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-color-burn:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-color-burn:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-color-burn::before" />

<element class="content-after bg-blend-color-burn::after" />
 .bg-blend-color-burn Sets the background blend mode to color-burn.

bg-blend-hard-light

Sets the background blend mode to hard-light.

CSS Rules 

.bg-blend-hard-light {
  background-blend-mode: hard-light;
}

Usage 

<element class="bg-blend-hard-light" />

Responsive

Prefix .bg-blend-hard-light utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-hard-light" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-hard-light:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-hard-light:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-hard-light::before" />

<element class="content-after bg-blend-hard-light::after" />
 .bg-blend-hard-light Sets the background blend mode to hard-light.

bg-blend-soft-light

Sets the background blend mode to soft-light.

CSS Rules 

.bg-blend-soft-light {
  background-blend-mode: soft-light;
}

Usage 

<element class="bg-blend-soft-light" />

Responsive

Prefix .bg-blend-soft-light utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-soft-light" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-soft-light:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-soft-light:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-soft-light::before" />

<element class="content-after bg-blend-soft-light::after" />
 .bg-blend-soft-light Sets the background blend mode to soft-light.

bg-blend-difference

Sets the background blend mode to difference.

CSS Rules 

.bg-blend-difference {
  background-blend-mode: difference;
}

Usage 

<element class="bg-blend-difference" />

Responsive

Prefix .bg-blend-difference utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-difference" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-difference:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-difference:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-difference::before" />

<element class="content-after bg-blend-difference::after" />
 .bg-blend-difference Sets the background blend mode to difference.

bg-blend-exclusion

Sets the background blend mode to exclusion.

CSS Rules 

.bg-blend-exclusion {
  background-blend-mode: exclusion;
}

Usage 

<element class="bg-blend-exclusion" />

Responsive

Prefix .bg-blend-exclusion utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-exclusion" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-exclusion:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-exclusion:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-exclusion::before" />

<element class="content-after bg-blend-exclusion::after" />
 .bg-blend-exclusion Sets the background blend mode to exclusion.

bg-blend-hue

Sets the background blend mode to hue.

CSS Rules 

.bg-blend-hue {
  background-blend-mode: hue;
}

Usage 

<element class="bg-blend-hue" />

Responsive

Prefix .bg-blend-hue utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-hue" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-hue:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-hue:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-hue::before" />

<element class="content-after bg-blend-hue::after" />
 .bg-blend-hue Sets the background blend mode to hue.

bg-blend-saturation

Blends the background image/color with the element's backdrop using the saturation blend mode.

CSS Rules 

.bg-blend-saturation {
  background-blend-mode: saturation;
}

Usage 

<element class="bg-blend-saturation" />

Responsive

Prefix .bg-blend-saturation utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-saturation" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-saturation:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-saturation:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-saturation::before" />

<element class="content-after bg-blend-saturation::after" />
 .bg-blend-saturation Blends the background image/color with the element's backdrop using the saturation blend mode.

bg-blend-color

Blends the background image/color with the element's backdrop using the color blend mode.

CSS Rules 

.bg-blend-color {
  background-blend-mode: color;
}

Usage 

<element class="bg-blend-color" />

Responsive

Prefix .bg-blend-color utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-color" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-color:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-color:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-color::before" />

<element class="content-after bg-blend-color::after" />
 .bg-blend-color Blends the background image/color with the element's backdrop using the color blend mode.

bg-blend-luminosity

Blends the background image/color with the element's backdrop using the luminosity blend mode.

CSS Rules 

.bg-blend-luminosity {
  background-blend-mode: luminosity;
}

Usage 

<element class="bg-blend-luminosity" />

Responsive

Prefix .bg-blend-luminosity utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-blend-luminosity" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-blend-luminosity:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-blend-luminosity:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-blend-luminosity::before" />

<element class="content-after bg-blend-luminosity::after" />
 .bg-blend-luminosity Blends the background image/color with the element's backdrop using the luminosity blend mode.