0build.dev
Choose a layout

mix-blend-mode

Report an Issue
Class Description

mix-blend-normal

Sets mix-blend-mode to normal, disabling blending with the element's backdrop.

CSS Rules 

.mix-blend-normal {
  mix-blend-mode: normal;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-normal::before" />

<element class="content-after mix-blend-normal::after" />
 .mix-blend-normal Sets mix-blend-mode to normal, disabling blending with the element's backdrop.

mix-blend-multiply

Sets mix-blend-mode: multiply.

CSS Rules 

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-multiply::before" />

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

mix-blend-screen

Sets mix-blend-mode: screen.

CSS Rules 

.mix-blend-screen {
  mix-blend-mode: screen;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-screen::before" />

<element class="content-after mix-blend-screen::after" />
 .mix-blend-screen Sets mix-blend-mode: screen.

mix-blend-overlay

Sets mix-blend-mode: overlay.

CSS Rules 

.mix-blend-overlay {
  mix-blend-mode: overlay;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-overlay::before" />

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

mix-blend-darken

Sets mix-blend-mode: darken.

CSS Rules 

.mix-blend-darken {
  mix-blend-mode: darken;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-darken::before" />

<element class="content-after mix-blend-darken::after" />
 .mix-blend-darken Sets mix-blend-mode: darken.

mix-blend-lighten

Sets mix-blend-mode: lighten.

CSS Rules 

.mix-blend-lighten {
  mix-blend-mode: lighten;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-lighten::before" />

<element class="content-after mix-blend-lighten::after" />
 .mix-blend-lighten Sets mix-blend-mode: lighten.

mix-blend-color-dodge

Blends the element with its backdrop using the color-dodge blend mode.

CSS Rules 

.mix-blend-color-dodge {
  mix-blend-mode: color-dodge;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-color-dodge::before" />

<element class="content-after mix-blend-color-dodge::after" />
 .mix-blend-color-dodge Blends the element with its backdrop using the color-dodge blend mode.

mix-blend-color-burn

Blends the element with its backdrop using the color-burn blend mode.

CSS Rules 

.mix-blend-color-burn {
  mix-blend-mode: color-burn;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-color-burn::before" />

<element class="content-after mix-blend-color-burn::after" />
 .mix-blend-color-burn Blends the element with its backdrop using the color-burn blend mode.

mix-blend-hard-light

Blends the element with its backdrop using the hard-light blend mode.

CSS Rules 

.mix-blend-hard-light {
  mix-blend-mode: hard-light;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-hard-light::before" />

<element class="content-after mix-blend-hard-light::after" />
 .mix-blend-hard-light Blends the element with its backdrop using the hard-light blend mode.

mix-blend-soft-light

Blends the element with its backdrop using the soft-light blend mode.

CSS Rules 

.mix-blend-soft-light {
  mix-blend-mode: soft-light;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-soft-light::before" />

<element class="content-after mix-blend-soft-light::after" />
 .mix-blend-soft-light Blends the element with its backdrop using the soft-light blend mode.

mix-blend-difference

Sets mix-blend-mode: difference.

CSS Rules 

.mix-blend-difference {
  mix-blend-mode: difference;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-difference::before" />

<element class="content-after mix-blend-difference::after" />
 .mix-blend-difference Sets mix-blend-mode: difference.

mix-blend-exclusion

Blends the element with its backdrop using the exclusion blend mode.

CSS Rules 

.mix-blend-exclusion {
  mix-blend-mode: exclusion;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-exclusion::before" />

<element class="content-after mix-blend-exclusion::after" />
 .mix-blend-exclusion Blends the element with its backdrop using the exclusion blend mode.

mix-blend-hue

Blends the element with its backdrop using the hue blend mode.

CSS Rules 

.mix-blend-hue {
  mix-blend-mode: hue;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-hue::before" />

<element class="content-after mix-blend-hue::after" />
 .mix-blend-hue Blends the element with its backdrop using the hue blend mode.

mix-blend-saturation

Blends the element with its backdrop using the saturation blend mode.

CSS Rules 

.mix-blend-saturation {
  mix-blend-mode: saturation;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-saturation::before" />

<element class="content-after mix-blend-saturation::after" />
 .mix-blend-saturation Blends the element with its backdrop using the saturation blend mode.

mix-blend-color

Blends the element with its backdrop using the color blend mode.

CSS Rules 

.mix-blend-color {
  mix-blend-mode: color;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-color::before" />

<element class="content-after mix-blend-color::after" />
 .mix-blend-color Blends the element with its backdrop using the color blend mode.

mix-blend-luminosity

Blends the element with its backdrop using the luminosity blend mode.

CSS Rules 

.mix-blend-luminosity {
  mix-blend-mode: luminosity;
}

Usage 

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

Responsive

Prefix .mix-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:mix-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="mix-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="mix-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 mix-blend-luminosity::before" />

<element class="content-after mix-blend-luminosity::after" />
 .mix-blend-luminosity Blends the element with its backdrop using the luminosity blend mode.

mix-blend-plus-darker

Blends the element with its backdrop using the plus-darker blend mode.

CSS Rules 

.mix-blend-plus-darker {
  mix-blend-mode: plus-darker;
}

Usage 

<element class="mix-blend-plus-darker" />

Responsive

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

<element class="md:mix-blend-plus-darker" />

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="mix-blend-plus-darker: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="mix-blend-plus-darker: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 mix-blend-plus-darker::before" />

<element class="content-after mix-blend-plus-darker::after" />
 .mix-blend-plus-darker Blends the element with its backdrop using the plus-darker blend mode.

mix-blend-plus-lighter

Blends the element with its backdrop using the plus-lighter blend mode.

CSS Rules 

.mix-blend-plus-lighter {
  mix-blend-mode: plus-lighter;
}

Usage 

<element class="mix-blend-plus-lighter" />

Responsive

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

<element class="md:mix-blend-plus-lighter" />

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="mix-blend-plus-lighter: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="mix-blend-plus-lighter: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 mix-blend-plus-lighter::before" />

<element class="content-after mix-blend-plus-lighter::after" />
 .mix-blend-plus-lighter Blends the element with its backdrop using the plus-lighter blend mode.