All 16 blend modes: multiply, screen, overlay, difference, exclusion, hue… This family contains 18 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
mix-blend-normal | mix-blend-mode: normal; |
mix-blend-multiply | mix-blend-mode: multiply; |
mix-blend-screen | mix-blend-mode: screen; |
mix-blend-overlay | mix-blend-mode: overlay; |
mix-blend-darken | mix-blend-mode: darken; |
mix-blend-lighten | mix-blend-mode: lighten; |
mix-blend-color-dodge | mix-blend-mode: color-dodge; |
mix-blend-color-burn | mix-blend-mode: color-burn; |
mix-blend-hard-light | mix-blend-mode: hard-light; |
mix-blend-soft-light | mix-blend-mode: soft-light; |
mix-blend-difference | mix-blend-mode: difference; |
mix-blend-exclusion | mix-blend-mode: exclusion; |
mix-blend-hue | mix-blend-mode: hue; |
mix-blend-saturation | mix-blend-mode: saturation; |
mix-blend-color | mix-blend-mode: color; |
mix-blend-luminosity | mix-blend-mode: luminosity; |
mix-blend-plus-darker | mix-blend-mode: plus-darker; |
mix-blend-plus-lighter | mix-blend-mode: plus-lighter; |
Example#
example
<div class="mix-blend-multiply bg-fuchsia-500">Duotone layer</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- mix-blend-difference for always-contrast overlays
- Blend modes need an opaque backdrop to read predictably
Related#
utilities/effects/backdrop-filter|Backdrop filters · utilities/effects/opacity|Opacity