CSS Blend Modes: mix-blend-mode and background-blend-mode

1. Fundamentals: how CSS Blend Modes work

CSS Blend Modes define how two overlapping layers are visually combined. The concept comes directly from image editing: Photoshop users have known layer blend modes for decades. In the browser, each blend mode describes a mathematical formula that calculates the output color for every pixel from the source color (the element) and the destination color (the background behind it). The 16 standardized CSS Blend Modes in the CSS Compositing specification are grouped as follows: darkening (multiply, darken, color-burn), lightening (screen, lighten, color-dodge), contrast (overlay, soft-light, hard-light) and color (hue, saturation, color, luminosity), plus the special modes difference and exclusion.

The formulas behind CSS Blend Modes work with normalized pixel values between 0.0 and 1.0. For multiply the formula is C = A × B: two 50 percent gray layers (0.5 × 0.5 = 0.25) produce a dark gray. For screen the formula is C = 1 - (1-A)(1-B): the inverse of the product of the inverses, meaning the result is always lighter than the lighter of the two inputs. Understanding this mathematical foundation helps you predict CSS Blend Modes instead of discovering them through trial and error.

2. mix-blend-mode: blending an element with the background

The mix-blend-mode property determines how an element is blended with the background behind it. The default value is normal, meaning ordinary composition without blending. Any other CSS Blend Mode value activates the corresponding blend formula. The element can be text, an image, a div with a background color, or any other HTML element. The property affects the entire element including all of its content: there is no way to apply mix-blend-mode only to an element's background without also affecting its content.

An important aspect of mix-blend-mode is the compositing context. By default, an element is blended with everything beneath it in the stacking context, which means potentially the entire page background. This sometimes leads to unwanted effects: white text with mix-blend-mode: multiply on a white container is invisible, because white × anything = anything (white is the neutral color for multiply). This is where isolation comes in: it limits the compositing context and restricts blending to within a defined group.

/* mix-blend-mode applied to text over an image */
.hero-text-blend {
  /* Text with screen blend mode appears inverted-bright on image */
  mix-blend-mode: screen;
  color: #c4b5fd; /* violet, becomes lighter/glow effect on dark bg */
  font-size: 4rem;
  font-weight: 800;
}

/* Overlay a colored shape over image for tint effect */
.image-tint-overlay {
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.7); /* violet */
  mix-blend-mode: multiply; /* darkens underlying image with tint color */
}

/* Exclusion for psychedelic inversion effect */
.invert-text {
  mix-blend-mode: exclusion;
  color: white;
  /* On dark areas: appears light. On light areas: appears dark. */
  /* Exact formula: C = A + B - 2AB */
}

/* Luminosity: take luminance from source, color from background */
.bw-image-over-color {
  mix-blend-mode: luminosity;
  /* Grayscale image acquires background color hues */
}

3. multiply and screen: the basic effects

multiply is the most commonly used CSS Blend Mode for tinting effects. Black stays black, white becomes transparent, and everything in between darkens. The result is always darker than the lighter of the two inputs. A common use case: a colored layer with mix-blend-mode: multiply over a photo tints the image with the overlay color while preserving the photo's light and shadow structure. Violet over a grayscale image produces a violet tinted photo with the same contrast as the original, or in Photoshop terms, a "duotone" or "color tint".

screen is the arithmetic opposite of multiply: white stays white, black becomes transparent, and everything in between gets lighter. The result is always lighter than the lighter of the two inputs. Typical use cases are fire, light effects and glow effects. A white fire sprite with mix-blend-mode: screen over a background image makes its black areas invisible and shows only the bright flame pixels, a classic VFX compositing trick. CSS Blend Modes reproduce exactly what film studios do with "screen" compositing in After Effects.

4. overlay and soft-light: contrast enhancing modes

overlay is a context dependent CSS Blend Mode: for dark background pixels it behaves like multiply (darkening), for light pixels it behaves like screen (lightening). This increases the background's contrast and gives it more depth. The dividing line sits at 50 percent gray: pixels above 0.5 get lighter, pixels below get darker. That is why 50 percent gray (#808080) is completely neutral with overlay: it does not change the background at all. This makes it the neutral color for overlay.

soft-light is a gentler version of overlay. The same dark/light logic applies, but the effect is noticeably more subtle. Instead of sharp contrast enhancement, soft-light creates a soft lighting atmosphere, as if diffuse light were falling on the image. The difference is especially visible in photography: overlay makes photos crisp and dramatic, while soft-light makes them warm and atmospheric. In practice both CSS Blend Modes are used for texture overlays: a paper or canvas texture with overlay gives a photo a dramatic, aged look, while soft-light produces a subtle, organic feel.

/* Duotone effect: grayscale image + two-color gradient via blend modes */
.duotone-wrapper {
  position: relative;
  display: inline-block;
  /* Step 1: Desaturate the image */
  filter: grayscale(100%);
}

.duotone-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Step 2: Gradient from shadow color to highlight color */
  background: linear-gradient(
    135deg,
    #0f172a 0%,   /* shadow tone: dark navy */
    #7c3aed 100%  /* highlight tone: violet */
  );
  /* Step 3: Multiply blend, dark areas get shadow tone, light areas get highlight */
  mix-blend-mode: multiply;
}

/* Texture overlay: adds film grain / paper feel */
.textured-section {
  position: relative;
}

.textured-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Noise texture via SVG data URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  /* overlay blend, adds contrast texture without color change */
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

5. Color based modes: hue, saturation, color, luminosity

The four color based CSS Blend Modes work in the HSL color space rather than with RGB pixel values. They let you combine individual color dimensions from two layers. hue takes the hue (H) from the source element and lightness (L) plus saturation (S) from the background. saturation takes the saturation from the source element and hue plus lightness from the background. color combines hue and saturation from the source element with the lightness of the background. luminosity is the opposite: lightness from the source element, hue and saturation from the background.

The most practical of these color based CSS Blend Modes for web design is color: it colorizes a grayscale image with a color without altering the image's brightness structure. This is the classic "hand colored photo" effect from Photoshop, achieved in a single line of CSS. luminosity serves the opposite purpose: it overlays a colored image with a black and white photo that contributes texture and brightness while the background's colors are preserved. Combined with pseudo elements, these four modes are extremely powerful for creative typography and image treatments that would traditionally have required an image editor.

6. background-blend-mode: blending multiple backgrounds

background-blend-mode is the second CSS Blend Modes property and it works differently from mix-blend-mode. It defines how multiple background layers of a single element blend with each other, meaning the interaction between different backgrounds of the same element, not the interaction of the element with the surrounding content. CSS supports multiple comma separated background values, and background-blend-mode can assign a different blend mode to each of these layers.

The classic application pattern for CSS Blend Modes with background-blend-mode is: a photo as the first background image layer, a solid color as the second layer (via background-color or a linear-gradient into a single color), and background-blend-mode: multiply or color. This produces a tinted version of the photo without modifying the image file or nesting multiple elements. This is especially useful for dynamic color themes: with custom properties you can swap the tint color at runtime, and all product photos instantly appear in the new accent color.

/* background-blend-mode: image + color tint in single element */
.product-card {
  --tint-color: #7c3aed; /* violet, can be changed via JS for theming */

  background-image:
    linear-gradient(var(--tint-color), var(--tint-color)), /* tint layer */
    url('/images/product.jpg');                              /* photo layer */
  background-blend-mode: multiply; /* tint darkens image in tint color */
  background-size: cover;
  background-position: center;

  /* Theme toggle: change tint color dynamically */
  transition: background-image 0.3s ease;
}

/* Multiple blend modes for multi-layer effects */
.hero-multi-layer {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(196,181,253,0.6), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(124,58,237,0.5), transparent 50%),
    url('/images/hero-photo.jpg');
  background-blend-mode:
    screen,    /* first gradient: screened over photo, lightens */
    multiply,  /* second gradient: multiplied, darkens */
    normal;    /* photo: base layer */
  background-size: cover;
}

7. isolation: limiting the compositing context

The isolation: isolate property is the counterpart to mix-blend-mode and is essential for using CSS Blend Modes in a controlled way. Without isolation, CSS Blend Modes are calculated against everything beneath them in the stacking context, potentially against the entire page background, other elements, and even the body element's background images. This often leads to unpredictable results, especially when blend mode elements live inside components that get reused in different contexts.

With isolation: isolate on a container element, all CSS Blend Modes of child elements are calculated only within that container. The container itself forms its own compositing group. This means text with mix-blend-mode: multiply inside an isolation: isolate container only blends with the container's own background, not with elements outside it. This makes CSS Blend Modes reliable and portable in components: the component behaves the same regardless of where it is placed on the page. isolation: isolate also creates a new stacking context, which simultaneously resolves z-index issues within the component.

8. Practical examples: duotone, texture overlay, text effects

The duotone technique with CSS Blend Modes involves two steps: first the image is desaturated with filter: grayscale(100%), then a gradient from the shadow color to the highlight color is overlaid using mix-blend-mode: multiply. The result is a photo rendered in two color tones, identical to the duotone effect in Photoshop or Figma, but done purely in CSS. One advantage is that the colors can be varied dynamically via CSS custom properties, so a hover state can show the image in a different color combination, giving interactive duotone effects without any JavaScript image processing.

For texture overlays, mix-blend-mode: overlay or soft-light on a pseudo element with an SVG noise texture as its background pattern works well. The SVG texture is embedded directly in the CSS as a data URI, so there is no external image file and no HTTP request. The pseudo element covers the entire content area and gives it an organic, non-digital feel. Combined with a warm gradient background, this produces a retro poster look that lives entirely in CSS. This pattern shows up in high end brand design as well as in modern marketing websites, and CSS Blend Modes make it achievable with very little code.

9. CSS Blend Modes compared side by side

Choosing the right CSS Blend Mode depends on the visual effect you want to achieve. The table below shows the most important modes along with their typical use case, their neutral color and their core mathematical principle.

This table is a reference tool to get you started. In practice, working with CSS Blend Modes requires visual experimentation, because the result depends heavily on the specific images and colors involved. The mathematical formulas help you predict the direction of the effect, but the optimal combination of blend mode, opacity and color is found by trying things out in the browser. DevTools lets you change CSS values live, which speeds up iteration considerably.

10. Summary

CSS Blend Modes bring Photoshop style layer composition directly into the browser, with no JavaScript, no image processing and no external tools. mix-blend-mode defines how an element blends with its background, while background-blend-mode controls the interaction between multiple background layers of the same element. The most important modes in practice are multiply for tinting and duotone, screen for light effects, overlay for texture overlays with contrast enhancement, and color plus luminosity for HSL based color transfers. isolation: isolate limits the compositing context and makes CSS Blend Modes reliable inside components.

Browser support for CSS Blend Modes is excellent: all modern browsers support the full palette without any prefix. Performance is not a primary concern as long as blend mode elements sit in the normal DOM flow and are not animated. For dynamic color themes, such as tint colors controlled through CSS custom properties, CSS Blend Modes are an elegant tool that achieves a big visual impact with minimal CSS changes. Once you know the potential of blend modes, you reach for image editing software less often and for the DevTools console more often.

11. FAQ: CSS Blend Modes