Background Blend Mode Property
Last updated: 2026-09-13
background-blend-mode Background Blend Mode Property
background-blend-mode sets the blending mode between an element's background images, and between background images and the background color. It supports modes such as multiply, screen, and overlay, similar to Photoshop layer blending. Added in CSS3, it is great for rich visual effects.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | Keyword | Background blend mode |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| Supported in all major browsers | |||||
Tip： Set multiple blend modes separated by commas to match multiple background images, e.g. background-blend-mode: multiply, screen.
Warning： background-blend-mode does not blend the element with other page content; use mix-blend-mode for blending between elements.
❓ FAQ
QWhat is the difference between background-blend-mode and mix-blend-mode?
Abackground-blend-mode blends an element's own background layers — background images with each other and with the background color. mix-blend-mode blends the element itself with the page content below it. The former works on the element's internal background layers; the latter works between the whole element and the rest of the page. To darken a background image for better text readability, background-blend-mode is enough.
QWhich blend modes are used most often?
Amultiply multiplies colors and darkens the result, great for overlaying dark tints on light textures or darkening a background for text readability. screen lightens, suitable for glow effects. overlay combines both to boost contrast. darken/lighten pick per-channel extremes, and difference creates creative inversion effects. In general the results are similar to Photoshop layer blending.
QWhat values does background-blend-mode support?
A16 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.
QHow do I darken a background image with blending so text stays readable?
AUse multiply with a dark background color: background-image: url(bg.jpg); background-color: rgba(0,0,0,.5); background-blend-mode: multiply;. Multiplying by the dark color darkens the image and raises text contrast. IE does not support blending, so keep a solid color fallback.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
