ScreenshotNeo
Sign in Get a free key

BlogGuides

CSS Blend Modes: How to Blend Images and Colors

Learn when to use mix-blend-mode or background-blend-mode, how stacking and isolation change the result, and how to troubleshoot real CSS blending effects.

By the ScreenshotNeo team4 October 20267 min read

Use mix-blend-mode when an element’s content should blend with the backdrop behind it. Use background-blend-mode when the element’s own background images and background color should blend with one another. The difference matters: the first involves the surrounding stacking context; the second is limited to the element’s background layers.

Blend modes calculate a color result from foreground and backdrop colors at affected pixels. The mode you choose changes that result, and the appearance depends on the actual colors and layers. There is no universally best mode.

1. Choose the right CSS blend property

Decision mix-blend-mode background-blend-mode
What blends? The element’s content The element’s background images and background color
What does it blend against? The backdrop in the same stacking context The element’s own background layers
Use it for Text or foreground imagery that should interact with underlying page content A color tint over a background image, or combinations of background images
Layer ordering concern Backdrop and stacking context determine the scope Mode order corresponds to background-image order

For example, a heading over a photo generally calls for mix-blend-mode. A photo tinted by a color assigned as the same element’s background calls for background-blend-mode.

2. Blend foreground content with what is behind it

Apply mix-blend-mode to the element whose content should participate in the blend. This runnable example places text over a background image and uses difference for the text:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mix blend mode example</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui, sans-serif; }
  .hero {
    min-height: 24rem;
    display: grid;
    place-items: center;
    background: center / cover no-repeat url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1600");
  }
  .hero h1 {
    margin: 0;
    color: white;
    font-size: clamp(3rem, 10vw, 8rem);
    mix-blend-mode: difference;
  }
</style>
<main class="hero"><h1>Explore</h1></main>
</html>

The visible result depends on the image pixels behind the text. Check the rendered design with the actual background and supported browsers, and verify that the heading remains legible. A blend mode by itself does not ensure accessible contrast.

3. Blend a background image with a color

Set a background color and image on the same element, then add background-blend-mode. The color can act as a tint; multiply is a useful starting point when you want to try a darkening effect.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background blend mode example</title>
<style>
  .photo-tint {
    width: min(100% - 2rem, 52rem);
    min-height: 28rem;
    margin: 2rem auto;
    background-color: rebeccapurple;
    background-image: url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1600");
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
  }
</style>
<div class="photo-tint" role="img" aria-label="Mountain landscape with a purple tint"></div>
</html>

This example blends the element’s background layers. It does not make foreground text or other outside content blend with the photo; use mix-blend-mode for that goal.

4. Combine multiple background images

When an element has multiple background images, give background-blend-mode a corresponding mode list. The first mode applies to the first background image, the second to the second image, and so on. CSS repeats or truncates the mode list to match the background-image list.

.layered-card {
  background-color: #344;
  background-image:
    linear-gradient(rgb(40 10 80 / 45%), rgb(40 10 80 / 45%)),
    url("photo.jpg");
  background-blend-mode: screen, multiply;
  background-position: center;
  background-size: cover;
}

Keep the lists easy to audit: format each image and its intended mode on corresponding lines. If an image is added or removed, revisit the mode list, since list matching can otherwise repeat or drop values in ways that obscure the intended effect.

5. Choose and tune a blend mode

The <blend-mode> value family includes normal, darken, multiply, color-burn, lighten, screen, color-dodge, overlay, soft-light, hard-light, difference, exclusion, hue, saturation, color, and luminosity.

  • For a darkening direction, try multiply or darken.
  • For a lightening direction, try screen or lighten.
  • For contrast and color-component effects, compare overlay, soft-light, hard-light, difference, exclusion, hue, saturation, color, and luminosity.

These are starting points, not guarantees: the same mode can look different with different foreground and backdrop colors. Preview actual content, including image variations and text, before settling on a mode.

6. Control which layers participate

mix-blend-mode uses the backdrop within the relevant stacking context. The surrounding page structure therefore affects what participates. If a blend should be constrained to a group, try isolation: isolate on a wrapper:

.blend-group {
  isolation: isolate;
  padding: 2rem;
  background: #f2eee8;
}

.blend-group .label {
  color: white;
  mix-blend-mode: difference;
}

Isolation changes which backdrop is included in the blending calculation. Inspect the effect in the actual page structure: moving an element or changing its ancestors can change the observed scope. Avoid assuming that a demo’s stacking behavior will carry over unchanged to a more complex layout.

7. Test the rendered result

  1. Decide whether the subject is foreground content or a set of background layers.
  2. Choose mix-blend-mode for content against the backdrop, or background-blend-mode for the element’s own backgrounds.
  3. Start with a mode that matches the intended direction, such as multiply for a darkening experiment or screen for a lightening experiment.
  4. Check the effect with the real assets and surrounding stacking context.
  5. Review text and important details for legibility at relevant viewport sizes.
  6. Check behavior in the browsers the project supports, especially if the design depends on a particular mode or stacking detail.

MDN labels blend modes widely available and reports cross-browser availability since January 2020, while noting that some parts may vary. Confirm the specific behavior your design depends on in the current compatibility information and supported browsers.

8. Troubleshooting

Symptom Likely cause What to check
The element looks unchanged The selected mode is normal, the colors yield a subtle result, or the intended backdrop is not in scope. Try a visibly different mode and inspect which element is behind the blended content in the actual stacking context.
Text blends with the page unexpectedly The backdrop includes more surrounding content than the design intended. Inspect the stacking structure and try isolation: isolate on a wrapper around the intended group.
The photo tint does not appear The image and color may be on different elements, or the chosen mode may produce a subtle result for those colors. Put the color, image, and background-blend-mode on the same element and compare another mode with the same assets.
One background layer has an unexpected effect The mode list order does not match the background-image list, or the list is being repeated or truncated. Count the image and mode entries, then align the intended mode with each image’s position.
Text is difficult to read on some images The blend result depends on the pixels behind the text and may change across images. Evaluate the actual variants and viewport sizes. Do not rely on the blend mode alone for contrast.
The result differs in a supported browser Some behavior can vary across browser implementations or page structures. Check the specific mode and stacking behavior in each supported browser using the production markup.

9. Or skip the browser setup

If the goal is to capture the rendered page after you have tuned its CSS, ScreenshotNeo is a website screenshot API and MCP server for developers. Its one-call API can return a PNG, JPEG, WebP, or PDF. The CSS effects remain part of the page; ScreenshotNeo captures the page rather than replacing the blend-mode implementation.

Cookie and consent banners are accepted like a visitor would accept them, and 60+ known consent platforms, newsletter popups, and chat widgets are removed before the shot. Each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; the response reports the page verdict and billing status in X-Page-Verdict and X-Billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.

See the ScreenshotNeo API documentation for parameters and configuration.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Replace the example URL with the page you want to capture. Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

10. Performance, reliability, and cost

For CSS blend modes, focus on the rendered effect and the real layer structure. Keep background layer lists deliberate, and verify designs that depend on stacking or isolation in the supported browsers. Do not assume a particular visual result from a mode name alone.

For screenshot capture, the request returns a rendered page image or PDF, so the page’s assets and load behavior affect whether the result is useful. ScreenshotNeo supports caching with a TTL you choose, asynchronous jobs with signed webhooks, and bulk capture of up to 100 URLs per call. Use those options when they fit the capture workflow. Its published plans are Free: 1,000 shots/month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; and Business: $249 for 1,000,000. Yearly billing gives two months free.

11. FAQ

Can I use both blend properties on one element?

Yes, when you have separate goals: background-blend-mode blends that element’s background layers, while mix-blend-mode blends its content with the backdrop. Check the final rendering in context.

Does a blend mode guarantee readable text?

No. The result depends on the colors behind the text. Check legibility against the actual images and content variations.

Is CSS blending the same as mixing two CSS colors?

This guide covers compositing overlapping layers with blend modes. CSS color mixing functions are a separate topic.

How do I capture a page with its blend effects?

Capture the page after its styles and assets have loaded. You can use a browser workflow or call the ScreenshotNeo API shown above.

Keep reading

7 min read

LinkedIn Open to Work Image

Learn what LinkedIn’s Open to Work photo frame means, who can see it, how to add or remove it, and how to choose the right privacy setting.