Blend background layers with background-blend-mode
Blend elements with underlying content using mix-blend-mode
Master all 16 blend modes (multiply, screen, overlay, difference, etc.)
Create duotone images and color tints without image editing
Build always-visible text with difference mode
Mix colors realistically using multiply and screen
Add texture overlays with overlay and soft-light
Control blend scope with isolation: isolate
Choose the right blend mode for common design effects
Introduction to CSS Blend Modes
Blend modes control how layers mix their colors, enabling Photoshop-like effects directly in CSS. CSS provides two blend mode properties: background-blend-mode (blends background layers within an element) and mix-blend-mode (blends an element with content behind it).
These effects were previously only possible in image editing software. Now you can create duotone images, texture overlays, color mixing effects, and more—all with CSS, dynamically and without extra image files.
background-blend-mode - Blending Backgrounds
The background-blend-mode property controls how multiple background layers (gradients, images, colors) blend together within a single element.
The mix-blend-mode property controls how an entire element blends with the content behind it (not just its own backgrounds). Perfect for overlays, text effects, and creative compositions.
/* Always-visible text (inverts background colors) */
.text {
color: white;
mix-blend-mode: difference;
/* Text always contrasts with any background */
}
/* Texture overlay on hero section */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url('pattern.svg') repeat;
mix-blend-mode: overlay;
}
/* Realistic color mixing */
.circle {
mix-blend-mode: multiply; /* Like mixing paint */
}
/* Luminous glow effect */
.glow {
background: radial-gradient(circle, #fee140, transparent);
mix-blend-mode: screen; /* Like projecting light */
}
All 16 Blend Modes Explained
CSS supports 16 blend modes, each creating different visual effects. They fall into five categories based on how they manipulate colors.
Darkening Modes
/* multiply - Darkens like mixing ink/paint */
background-blend-mode: multiply;
/* White becomes transparent, black stays black */
/* Use for: Shadows, duotone effects, color mixing */
/* darken - Keeps darkest colors from each layer */
background-blend-mode: darken;
/* Compares RGB values, keeps darkest */
/* color-burn - Darkens with increased contrast */
background-blend-mode: color-burn;
/* Intense darkening, very contrasty */
Lightening Modes
/* screen - Lightens like projecting light */
background-blend-mode: screen;
/* Black becomes transparent, white stays white */
/* Use for: Glow effects, light spots, brightening */
/* lighten - Keeps lightest colors from each layer */
background-blend-mode: lighten;
/* Compares RGB values, keeps lightest */
/* color-dodge - Lightens with decreased contrast */
background-blend-mode: color-dodge;
/* Intense brightening, washed out look */
Demonstrate realistic color mixing using blend modes. multiply simulates paint mixing (subtractive), while screen simulates light mixing (additive).
/* Subtractive color mixing (like paint) */
.circle-red, .circle-green, .circle-blue {
mix-blend-mode: multiply;
}
/* On white background: RGB → CMY */
/* Red + Green = Yellow */
/* Red + Blue = Magenta */
/* Green + Blue = Cyan */
/* All three = Black */
/* Additive color mixing (like light) */
.light-red, .light-green, .light-blue {
mix-blend-mode: screen;
}
/* On black background: RGB → RGB */
/* Red + Green = Yellow */
/* Red + Blue = Magenta */
/* Green + Blue = Cyan */
/* All three = White */
Texture Overlays - Subtle Depth
Add texture, noise, or patterns over backgrounds for visual depth without overwhelming the design.
The isolation property creates a new stacking context, preventing blend modes from affecting elements outside a container.
/* Without isolation */
.container {
background: #667eea;
}
.overlay {
mix-blend-mode: multiply;
/* Blends with container AND everything behind it */
}
/* With isolation */
.container {
background: #667eea;
isolation: isolate;
/* Creates new stacking context */
}
.overlay {
mix-blend-mode: multiply;
/* Only blends with elements inside container */
}
/* Practical example */
.card {
position: relative;
background: white;
isolation: isolate; /* Blend modes inside don't affect page background */
}
.card-overlay {
mix-blend-mode: multiply;
/* Only affects card content, not page behind card */
}
background-blend-mode vs mix-blend-mode
Understanding when to use each property is crucial for achieving the desired effect.
/* background-blend-mode */
/* Blends background layers WITHIN the same element */
.element {
background-image:
url('texture.png'),
url('photo.jpg');
background-blend-mode: overlay;
/* Texture blends with photo, both are backgrounds */
}
/* mix-blend-mode */
/* Blends ENTIRE ELEMENT with content behind it */
.overlay {
background: url('texture.png');
mix-blend-mode: overlay;
/* Element (including its background) blends with page behind */
}
/* Practical comparison */
/* Use background-blend-mode for: */
.duotone {
background-image: linear-gradient(...), url(...);
background-blend-mode: multiply;
/* Gradient and image are both backgrounds of same element */
}
/* Use mix-blend-mode for: */
.text-overlay {
color: white;
mix-blend-mode: difference;
/* Text element blends with background behind it */
}
.pattern-overlay::before {
content: '';
background: url('pattern.svg');
mix-blend-mode: overlay;
/* Pseudo-element blends with parent's background */
}
Key Takeaways
background-blend-mode: Blends background layers within one element
mix-blend-mode: Blends entire element with content behind it
multiply: Darkens (paint mixing) - use for duotones, shadows, CMY color mixing
screen: Lightens (light mixing) - use for glows, highlights, RGB color mixing
overlay: Combines multiply/screen - use for texture overlays, color tints
soft-light: Gentle contrast - use for subtle textures and adjustments
difference: Inverts colors - use for always-visible text
color: Transfers hue/saturation - use for colorizing grayscale images
isolation: isolate: Limits blend mode scope to container
All 16 modes are GPU-accelerated and work in modern browsers without prefixes
Duotone images: blend gradient over photo with multiply
Texture overlays: use overlay or soft-light with reduced opacity
Always-visible text: use difference mode with white or black text