Background blend mode
Utilities for controlling the blending mode of an element's background
Class reference
Use the .bg-blend-{ mode }
utility classes to control of the blending of each layer in an element’s background.
This will affect both the background color and background image.
Responsive
To control the background blend mode of an element at a specific breakpoint, add a {screen}:
prefix to any existing background blend mode utility. For example, use md:bg-blend-overlay
to apply the bg-blend-overlay
utility at only medium screen sizes and above.
<div class="bg-teal bg-blend-lighten md:bg-blend-overlay" style="background-image: url(...);">
<!-- ... -->
</div>
Hover
To control the background blend mode of an element on hover, add the hover:
prefix to any existing background blend mode utility. For example, use hover:bg-blend-multiply
to apply the bg-blend-multiply
utility on hover.
<div class="bg-teal bg-blend-normal hover:bg-blend-multiply" style="background-image: url(...);">
<!-- ... -->
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5