CSS Blend Modes

Blend modes control how a layer’s pixels blend with the underlying layer, mirroring Photoshop’s blend options.

background-blend-mode: multiply;
mix-blend-mode: screen;

Supported on images, backgrounds, and pseudo‑elements.

---

Example: Text over image with blend mode

.hero {
  background:url('mountain.jpg') center/cover;
  color:#fff;
  background-blend-mode: overlay;
}