Mix-blend-mode Property
Last updated: 2026-09-13
mix-blend-mode Mix-blend-mode Property
The mix-blend-mode property controls how an element's content blends its colors with the content beneath it (a background or adjacent elements), similar to layer blend modes in Photoshop. It lets text and images produce rich color compositing against a background, and is often used in posters, banners, and artistic page design.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
mix-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 | The blend mode |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| mix-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| Supported in all major browsers | |||||
Tip： multiply makes white transparent, so white logos fuse into a colored background; screen does the opposite, making black transparent.
Important： Blending depends on content beneath the element. If the element sits inside its own stacking context with nothing beneath it, no blending effect is visible.
❓ FAQ
QWhat is the difference between mix-blend-mode and background-blend-mode?
Amix-blend-mode blends an element's content (including its background) with everything beneath it — a cross-element blend. background-blend-mode only blends multiple background layers within the same element. Use mix-blend-mode to fuse text with a background image, and background-blend-mode to blend several background images with each other.
QWhy is my mix-blend-mode not showing any visual effect in CSS?
ACommon causes: there is nothing blendable beneath the element; the element itself or a parent creates its own stacking context, limiting the blend scope; or the element is fully transparent or completely covered by content below. Add isolation: isolate to the parent to define the isolation scope explicitly, and check that blendable content really exists underneath.
QWhen should I use the multiply and screen blend modes in CSS?
Amultiply is friendly to white — white stays unchanged when blended — so it suits watermarking a white logo over a colored background. screen is the opposite: black has no effect, so it suits overlaying dark content on a bright background. Other common ones: overlay is good for blending text with images, and difference can create artistic color-inversion effects.
QHow good is browser support for mix-blend-mode, especially on mobile?
AModern desktop browsers (Chrome, Firefox, Safari, Edge) have full support since around 2015, but older versions and some WebView engines differ, and the blend may be missing or inconsistent. On mobile, iOS Safari and Chrome for Android both support it. For critical visuals, provide a fallback that does not depend on blending.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
