Effects

Mix Blend

Utilities for sets how an element's content should blend with its direct parent background.

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

Usage

Mix blend with background colors.

<div class="...">
  <div class="blend-darken bg-tint-amber-4 ... width-48 height-32"></div>
  <div class="blend-screen bg-tint-lime-4... -margin-t-24 margin-l-10 height-32"></div>
</div>

HTML

.dummy-blend-one {
  @extend
    .blend-darken,
    .bg-tint-amber-4,
    .width-48,
    .height-32;
}
.dummy-blend-two {
  @extend
    .blend-screen,
    .bg-tint-lime-4,
    .-margin-t-24,
    .margin-l-10,
    .height-32;
}

SCSS

Mix blend with images.

<div class="...">
  <img class="blend-darken ... width-48 height-32" src="...">
  <img class="blend-screen ... -margin-t-24 margin-l-10 width-48 height-32" src="...">
</div>

HTML

.dummy-blend-one {
  @extend
    .blend-darken,
    .width-48,
    .height-32;
}
.dummy-blend-two {
  @extend
    .blend-screen,
    .-margin-t-24,
    .margin-l-10,
    .width-48,
    .height-32;
}

SCSS

Mix blend with typography.

TEXT

<div class="relative">
  <div class="blend-darken ... absolute top-0 left-0">
    ...
  </div>
  <div class="blend-screen ... absolute top-6 left-6">
    ...
  </div>
</div>

HTML