Blend Modes & backdrop-filter

Blend Modes & backdrop-filter

Make text readable over busy photos and layer effects like design software.

mix-blend-mode

Blends the element with what's BELOW it. Like Photoshop layers:

.mix {
  mix-blend-mode: multiply;   /* darken with backdrop */
}
.mix {
  mix-blend-mode: screen;     /* lighten with backdrop */
  mix-blend-mode: difference; /* invert-ish clash */
  mix-blend-mode: overlay;
  mix-blend-mode: normal;     /* default */
}

backdrop-filter

Filters everything BEHIND the element, brilliant for "frosted glass":

.glass {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);     /* blur whatever is behind */
}

Now a translucent card blurs the page behind it, the classic glassmorphism look:

.nav-glass {
  backdrop-filter: blur(12px) saturate(1.3);
  background: rgba(255, 255, 255, 0.6);
}

Isolation

isolation: isolate contains blending within a group:

.group {
  isolation: isolate;
}

Practical uses

• Frosted-glass navigation bars.
• Headline text over busy photos.
• Gradient overlays with blend modes.

TL;DR

• mix-blend-mode blends an element with what's beneath.
• backdrop-filter: blur() = frosted glass effect.
• Always pair backdrop-filter with a translucent background.
• isolation: isolate stops blending from escaping.