AAtomic CSS

mix-blend-mode

Controls how an element's colors blend with its background and other elements. Same concept as Photoshop layer blend modes, determining the color compositing method for overlapping areas.

Class List

ClassCSSDescription
mbmnmix-blend-mode: normaldefault; no blending
mbmmmix-blend-mode: multiplymultiply; blends darker (white becomes transparent)
mbmsmix-blend-mode: screenscreen; blends lighter (black becomes transparent)
mbmomix-blend-mode: overlayoverlay; screen for light areas, multiply for dark areas
mbmdmix-blend-mode: darkenselects the darker color
mbmlmix-blend-mode: lightenselects the lighter color

Visual Comparison

Compares the effect of each blend mode by overlapping a red element on an indigo background.

mbmn

displays as-is without blending

mbmm

darkens by multiplying colors

mbms

lightens by adding colors

mbmo

processes light and dark areas separately

mbmd

keeps only the darker color

mbml

keeps only the lighter color

Text Blending

Applying blend-mode to text creates a natural blending effect with the background.

BLEND

BLEND

BLEND

BLEND

BLEND

BLEND

mbmnmbmmmbmsmbmombmdmbml

Code Examples

<!-- Color overlay effect -->
<div class="pr bg6366F1 h20rem br8px oh">
  <div class="pa t0 l0 w100p h100p bgEF4444 mbmm"></div>
  <p class="pa b2rem l2rem cFFFFFF fs2rem fw700">Multiply effect</p>
</div>

<!-- Text blending over image -->
<div class="pr bg27272A h16rem br8px oh df jcc aic">
  <h2 class="c6366F1 fs4rem fw800 mbms">SCREEN</h2>
</div>

<!-- Limit scope with isolation -->
<div class="ison pr bg18181B p2rem br8px">
  <div class="w8rem h8rem bg6366F1 br8px"></div>
  <div class="w8rem h8rem bgEF4444 br8px mbmm neg-mt2rem ml2rem"></div>
  <!-- blend applies only inside ison -->
</div>

<!-- Overlapping circle effect -->
<div class="ison pr h16rem df jcc aic">
  <div class="pa w10rem h10rem bgEF4444 br100p mbms"></div>
  <div class="pa w10rem h10rem bg22C55E br100p mbms ml4rem"></div>
  <div class="pa w10rem h10rem bg6366F1 br100p mbms ml2rem mt4rem"></div>
</div>

Tips & Notes

multiply vs screen

mbmm (multiply) blends toward darker colors, and mbms (screen) blends toward lighter colors. Multiply makes white transparent, screen makes black transparent.

Limiting scope with isolation

If blend-mode unintentionally bleeds outside the parent, apply ison (isolation: isolate) to the parent to limit the scope.

Background color required for effect

mix-blend-mode blends with the colors of elements behind it. The effect is not visible on transparent backgrounds.

isolationopacitybackgroundfiltercolor