Background Blend Mode
Utilities for controlling how an element's background image should blend with its background color.
Quick reference
|
Class
|
Properties
|
|---|---|
| bg-blend-normal | background-blend-mode: normal; |
| bg-blend-multiply | background-blend-mode: multiply; |
| bg-blend-screen | background-blend-mode: screen; |
| bg-blend-overlay | background-blend-mode: overlay; |
| bg-blend-darken | background-blend-mode: darken; |
| bg-blend-lighten | background-blend-mode: lighten; |
| bg-blend-color-dodge | background-blend-mode: color-dodge; |
| bg-blend-color-burn | background-blend-mode: color-burn; |
| bg-blend-hard-light | background-blend-mode: hard-light; |
| bg-blend-soft-light | background-blend-mode: soft-light; |
| bg-blend-difference | background-blend-mode: difference; |
| bg-blend-exclusion | background-blend-mode: exclusion; |
| bg-blend-hue | background-blend-mode: hue; |
| bg-blend-saturation | background-blend-mode: saturation; |
| bg-blend-color | background-blend-mode: color; |
| bg-blend-luminosity | background-blend-mode: luminosity; |
Basic usage
Setting the background blend mode
Use the bg-blend-{mode} utilities to control how an element’s background image(s) should blend with its background color.
<div class="bg-blend-multiply ..."> <!-- ... --> </div>
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-blend-darken to only apply the bg-blend-darken utility on hover.
<div class="bg-blend-lighten hover:bg-blend-darken"> <!-- ... --> </div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-blend-darken to apply the bg-blend-darken utility at only medium screen sizes and above.
<div class="bg-blend-lighten md:bg-blend-darken"> <!-- ... --> </div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
© 2022 Tailwind Labs Inc.
https://tailwindcss.com/docs/background-blend-mode
