Effects

Mix Blend

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

Class

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.

<!-- Example -->
<y class="...">
 <y class="blend-darken bg-amber-400 ... w-48 h-32"></y>
 <y class="blend-darken bg-khaki-400... -mt-24 ml-10 h-32"></y>
</y>

Mix blend with images.

<!-- Example -->
<y class="...">
 <img class="blend-darken bg-amber-400 ... w-48 h-32"
      src="...">
 <img class="blend-darken bg-khaki-400 ... -mt-24 ml-10 w-48 h-32"
      src="...">
</y>

Mix blend with typography.

TEXTTEXT

<!-- Example -->
<y class="...">
  <y class="blend-darken ... text-indigo-400 text-8xl font-extrabold">
    TEXT
  </y>
  <y class="blend-darken ... text-pink-400 text-8xl font-extrabold -mt-32 ml-16 ">
    TEXT
  </y>
</y>

Variant

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

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