Press/to search

Effects

Mix Blend

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


Class

classcss
blend-normalmix-blend-mode: normal
blend-multiplymix-blend-mode: multiply
blend-screenmix-blend-mode: screen
blend-overlaymix-blend-mode: overlay
blend-darkenmix-blend-mode: darken
blend-lightenmix-blend-mode: lighten
blend-colormix-blend-mode: color
blend-color-dodgemix-blend-mode: color-dodge
blend-color-burnmix-blend-mode: color-burn
blend-hard-lightmix-blend-mode: hard-light
blend-soft-lightmix-blend-mode: soft-light
blend-differencemix-blend-mode: difference
blend-exclusionmix-blend-mode: exclusion
blend-huemix-blend-mode: hue
blend-saturationmix-blend-mode: saturation
blend-luminositymix-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.