Background blend mode

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.

<div class="bg-teal bg-blend-{ mode }" style="background-image: url(...);"></div>

# 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.