Mix Blend Mode
Set how an element's content should blend with the background of its parent.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
Usage
Multiply
Use the mbm-m utility to multiply the colors of the element & its background.
<div class="mbm-m ..."> ...</div>Screen
Use the mbm-s utility to screen the colors of the element & its background.
<div class="mbm-s ..."> ...</div>Overlay
Use the mbm-o utility to overlay the colors of the element & its background.
<div class="mbm-o ..."> ...</div>Darken
Use the mbm-d utility to darken the colors of the element & its background.
<div class="mbm-d ..."> ...</div>Lighten
Use the mbm-l utility to lighten the colors of the element & its background.
<div class="mbm-l ..."> ...</div>Responsiveness
Use breakpoint prefixes to target different screen sizes.
sm:mbm-[value]Small≥640px
md:mbm-[value]Medium≥768px
lg:mbm-[value]Large≥1024px
xxl:mbm-[value]Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:mbm-[value]