CSS Blend Modes
Create stunning visual effects by blending colors and images together. Master Photoshop-style blending right in your CSS with mix-blend-mode and background-blend-mode.
What Are Blend Modes?
Blend modes determine how an element's colors mix with the colors behind it. If you've used Photoshop or other design tools, you're already familiar with blend modes like "multiply", "screen", and "overlay". CSS brings these same effects to the web!
.overlay {
mix-blend-mode: multiply;
/* Element blends with everything behind it */
}
.background {
background-blend-mode: overlay;
/* Multiple backgrounds blend with each other */
}Two Types of Blending
- mix-blend-mode: Blends an element with its backdrop (everything behind it)
- background-blend-mode: Blends multiple background layers together
All Blend Modes
CSS supports 16 blend modes. Each creates a unique effect - experiment to find the perfect look for your design.
Most Useful Blend Modes
- multiply: Darkens - perfect for shadows and overlays
- screen: Lightens - great for glows and highlights
- overlay: Contrast boost - combines multiply and screen
- soft-light: Subtle lighting effect - like a soft spotlight
- difference: Creates inverted colors - striking effects
- color: Applies hue and saturation - great for colorizing
mix-blend-mode
The mix-blend-mode property blends an element with everything behind it - backgrounds, images, text, the whole backdrop.
Text Overlay Effect
BLEND
.background {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.text {
font-size: 5rem;
font-weight: 900;
color: white;
mix-blend-mode: difference;
/* Text inverts the background colors */
}Image Duotone Effect
.image {
background: url('image.jpg');
position: relative;
}
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
mix-blend-mode: multiply;
/* Creates duotone effect */
}Logo Adaptation
Light Background
Dark Background
.logo {
color: black;
mix-blend-mode: difference;
/* Logo automatically contrasts with background */
}
/* Works on any background color! */
.light { background: white; }
.dark { background: black; }background-blend-mode
Use background-blend-mode to blend multiple background layers together. This creates rich, complex effects without extra elements.
Gradient + Image Blend
Beautiful Blending
Gradient overlaid on pattern
.element {
background:
linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)),
url('pattern.png');
background-blend-mode: overlay;
/* Gradient blends with image */
}Multiple Gradient Blend
.element {
background:
radial-gradient(circle at 20% 50%, rgba(255, 0, 150, 0.5), transparent),
radial-gradient(circle at 80% 50%, rgba(0, 200, 255, 0.5), transparent),
linear-gradient(45deg, #667eea, #764ba2);
background-blend-mode: screen;
/* Creates vibrant, overlapping colors */
}Texture Overlay
Textured Effect
Adding depth with blend modes
.card {
background:
repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,.05) 2px, rgba(0,0,0,.05) 4px),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-blend-mode: multiply;
/* Subtle texture over gradient */
}Real-World Examples
Here's how blend modes solve real design problems.
Dark Mode Text
Adaptive Text
Light theme
Adaptive Text
Dark theme
.adaptive-text {
color: #888;
mix-blend-mode: difference;
/* Always contrasts with background */
}
/* No theme-specific styles needed! */Colorful Shadows
Vibrant Card
With blended shadows
.card {
background: white;
position: relative;
}
.card::before {
content: '';
position: absolute;
inset: -20px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: inherit;
filter: blur(20px);
opacity: 0.6;
z-index: -1;
mix-blend-mode: multiply;
/* Colorful shadow that blends */
}Browser Support
Blend modes have excellent support across modern browsers!
Browser Compatibility
- Chrome/Edge: 35+ ✅
- Firefox: 32+ ✅
- Safari: 8+ ✅
- Internet Explorer: Not supported ❌
Pro tip: Always design with blend modes as an enhancement. Your design should still work (even if less fancy) when blend modes aren't supported.
/* Feature detection with @supports */
@supports (mix-blend-mode: multiply) {
.fancy-text {
mix-blend-mode: difference;
}
}
/* Fallback for unsupported browsers */
.fancy-text {
/* Basic styling here */
}Performance Tips
Best Practices
- Use sparingly: Blend modes can be GPU-intensive on complex layouts
- Isolate blending: Create a new stacking context with
isolation: isolate - Test on mobile: Performance varies across devices
- Avoid over-nesting: Multiple blend modes on top of each other can be slow
/* Isolate blend mode effects */
.blend-container {
isolation: isolate;
/* Creates a new stacking context */
}
.blend-element {
mix-blend-mode: multiply;
/* Only blends within .blend-container */
}