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.
<!-- 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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |