CSS Blend Modes

Blend elements and background layers together using mix-blend-mode and background-blend-mode for creative photo effects and text overlays.

Overview

CSS blend modes control how an element's pixels mix with the pixels behind it similar to Photoshop layer blending. Two properties handle this: - **`mix-blend-mode`**: blends an element with whatever is rendered behind it in the stacking context - **`background-blend-mode`**: blends the element's background layers (image + color) with each other Common blend modes: | Mode | Effect | |---|---| | `multiply` | Darkens like two overhead projectors | | `screen` | Lightens like two camera exposures | | `overlay` | Brightens light areas, darkens dark areas | | `darken` | Keeps the darker of the two pixels | | `lighten` | Keeps the lighter of the two pixels | | `color-dodge` | Makes colors brighter by dividing | | `color` | Keeps hue/saturation from element, luminosity from background | | `luminosity` | Keeps luminosity from element, color from background | Blend modes are excellent for: text on photos, color tinting, duotone images, and creative overlays.

Key Points

•mix-blend-mode on an element blends it with the content behind it
•multiply is great for darkening white becomes transparent, colors multiply
•screen is the inverse of multiply black becomes transparent, lightens image
•overlay combines multiply and screen enhances contrast
•background-blend-mode blends background-image with background-color
•isolation: isolate on a parent prevents blending with content outside the parent
•Blend modes work with text too white text with mix-blend-mode: overlay "burns in" beautifully

Examples

Duotone image effect with background-blend-mode

.duotone {
  background-image: url(photo.jpg);
  background-color: #6366f1;
  background-blend-mode: luminosity; /* strips color from photo */
  background-size: cover;
}

/* For true duotone (two colors):
   Use multiple backgrounds */
.duotone-two {
  background-image:
    linear-gradient(#6366f1, #8b5cf6),
    url(photo.jpg);
  background-blend-mode: multiply;
  background-size: cover;
}

Text on image with mix-blend-mode

.overlay-text {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  color: white;
  mix-blend-mode: overlay;
}

White text with overlay blend mode appears differently over light vs dark parts of the image, creating a natural contrast.

Color tinting with multiply

.photo-tinted {
  position: relative;
}

.photo-tinted img {
  display: block;
  width: 100%;
}

/* Color overlay that multiplies with the image */
.photo-tinted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(99, 102, 241, 0.6);
  mix-blend-mode: multiply;
}

multiply blend + color overlay tints the image without hiding details.

Common Mistakes

Using mix-blend-mode without a background behind the element blending with the page background (usually white) gives unexpected results
Forgetting isolation: isolate when you want blend modes to not leak to the parent's background
Expecting blend modes to work in Safari without testing most work but some complex stacks can differ

Note

For a quick duotone effect on any image: set background-image to the photo URL, background-color to your brand color, and background-blend-mode: luminosity. The image adopts your color palette in seconds.

CSS Blend Modes

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does mix-blend-mode: multiply do?