CSS Blend Modes Tutorial
Learn how to blend colors and images to create beautiful, professional designs with CSS
What Are CSS Blend Modes?
CSS blend modes control how colors mix when elements overlap. They let you create beautiful color effects without image editing software.
Two Types of Blend Modes:
- mix-blend-mode: Blends an element with content behind it
- background-blend-mode: Blends between background layers of one element
Why Use Blend Modes?
- Create color effects without images
- Make text stand out on any background
- Add professional color grading to photos
- Design modern UI elements with depth
- Create unique visual styles
CSS Blend Modes Examples
Complete Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Blend Modes Tutorial</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--accent-color: #ff416c;
--dark-color: #2c3e50;
--light-color: #f8f9fa;
--text-color: #333;
--text-light: #fff;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--border-radius: 0.5rem;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-heading: 'Montserrat', sans-serif;
}
body {
font-family: var(--font-main);
line-height: 1.6;
color: var(--text-color);
background: linear-gradient(135deg, var(--light-color) 0%, #eef2f5 100%);
padding: var(--spacing-md);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 5vw, 3rem);
margin-bottom: var(--spacing-sm);
}
h2 {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 4vw, 2rem);
margin: var(--spacing-lg) 0 var(--spacing-md);
color: var(--dark-color);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--primary-color);
}
.example {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.demo {
border: 2px solid #e9ecef;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin: var(--spacing-md) 0;
background: #f8f9fa;
}
.blend-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
}
.blend-item {
width: 150px;
height: 150px;
border-radius: var(--border-radius);
overflow: hidden;
position: relative;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.blend-item-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.9rem;
text-align: center;
padding: var(--spacing-sm);
}
.blend-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 0.3rem;
text-align: center;
font-size: 0.8rem;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: var(--spacing-md);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--spacing-md) 0;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.875rem;
}
.btn {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--primary-color);
color: var(--text-light);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.875rem;
margin-right: var(--spacing-sm);
transition: all 0.3s ease;
}
.btn:hover {
background: #5a0fb5;
transform: translateY(-2px);
}
.btn-copy {
background: var(--secondary-color);
}
.btn-copy:hover {
background: #1c67e3;
}
/* Base layers for blending */
.base-layer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.color-layer {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
}
.image-layer {
background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-size: cover;
}
.gradient-layer {
background: linear-gradient(45deg, #3498db, #2ecc71);
}
.pattern-layer {
background:
linear-gradient(45deg, #f1c40f 25%, transparent 25%, transparent 75%, #f1c40f 75%, #f1c40f),
linear-gradient(-45deg, #f1c40f 25%, transparent 25%, transparent 75%, #f1c40f 75%, #f1c40f);
background-size: 20px 20px;
}
/* Blend mode examples */
.normal-blend {
mix-blend-mode: normal;
}
.multiply-blend {
mix-blend-mode: multiply;
}
.screen-blend {
mix-blend-mode: screen;
}
.overlay-blend {
mix-blend-mode: overlay;
}
.darken-blend {
mix-blend-mode: darken;
}
.lighten-blend {
mix-blend-mode: lighten;
}
.color-dodge-blend {
mix-blend-mode: color-dodge;
}
.color-burn-blend {
mix-blend-mode: color-burn;
}
.hard-light-blend {
mix-blend-mode: hard-light;
}
.soft-light-blend {
mix-blend-mode: soft-light;
}
.difference-blend {
mix-blend-mode: difference;
}
.exclusion-blend {
mix-blend-mode: exclusion;
}
.hue-blend {
mix-blend-mode: hue;
}
.saturation-blend {
mix-blend-mode: saturation;
}
.color-blend {
mix-blend-mode: color;
}
.luminosity-blend {
mix-blend-mode: luminosity;
}
/* Background blend modes */
.background-blend-demo {
width: 100%;
height: 200px;
border-radius: var(--border-radius);
background-image:
url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'),
linear-gradient(45deg, #ff416c, #ff4b2b);
background-size: cover, auto;
background-blend-mode: overlay;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Text with blend modes */
.text-blend-demo {
width: 100%;
height: 150px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--border-radius);
}
.text-blend-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #3498db, #2ecc71);
}
.text-blend-content {
position: relative;
z-index: 2;
font-size: 2rem;
font-weight: bold;
color: white;
mix-blend-mode: difference;
}
/* Practical examples */
.photo-overlay {
width: 100%;
height: 250px;
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
}
.photo-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-blend {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #6a11cb, #2575fc);
mix-blend-mode: soft-light;
opacity: 0.7;
}
.ui-element {
width: 100%;
height: 120px;
background: linear-gradient(45deg, #2c3e50, #34495e);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.ui-highlight {
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
mix-blend-mode: overlay;
animation: shine 3s infinite linear;
}
@keyframes shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Comparison slider */
.comparison-slider {
position: relative;
width: 100%;
height: 300px;
border-radius: var(--border-radius);
overflow: hidden;
}
.comparison-before,
.comparison-after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.comparison-before {
background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-size: cover;
}
.comparison-after {
background:
url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'),
linear-gradient(45deg, #6a11cb, #2575fc);
background-size: cover, auto;
background-blend-mode: overlay;
width: 50%;
border-right: 2px solid white;
}
.comparison-handle {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 4px;
background: white;
transform: translateX(-2px);
cursor: ew-resize;
}
.comparison-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS Blend Modes Tutorial</h1>
<p>Learn how to blend colors and images for beautiful designs</p>
</header>
<section class="example">
<h2>What Are Blend Modes?</h2>
<p>Blend modes control how colors mix when layers overlap. CSS offers two properties:</p>
<ul>
<li><strong>mix-blend-mode</strong>: Blends an element with content behind it</li>
<li><strong>background-blend-mode</strong>: Blends between background layers of a single element</li>
</ul>
<div class="demo">
<div class="background-blend-demo">
This element uses background-blend-mode to mix an image with a gradient
</div>
</div>
<div class="code-block">
.background-blend-demo {
background-image:
url('image.jpg'),
linear-gradient(45deg, #ff416c, #ff4b2b);
background-blend-mode: overlay;
}
</div>
</section>
<section class="example">
<h2>1. Normal Blend Mode</h2>
<p>The default mode. The top layer completely covers the bottom layer.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer normal-blend"></div>
<div class="blend-label">normal</div>
</div>
</div>
</div>
<div class="code-block">
.normal-blend {
mix-blend-mode: normal;
}
</div>
</section>
<section class="example">
<h2>2. Multiply Blend Mode</h2>
<p>Darkens the image by multiplying colors. Similar to drawing with markers.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer multiply-blend"></div>
<div class="blend-label">multiply</div>
</div>
</div>
</div>
<div class="code-block">
.multiply-blend {
mix-blend-mode: multiply;
}
</div>
</section>
<section class="example">
<h2>3. Screen Blend Mode</h2>
<p>Lightens the image. Opposite of multiply. Good for light effects.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer screen-blend"></div>
<div class="blend-label">screen</div>
</div>
</div>
</div>
<div class="code-block">
.screen-blend {
mix-blend-mode: screen;
}
</div>
</section>
<section class="example">
<h2>4. Overlay Blend Mode</h2>
<p>Combines multiply and screen. Dark areas get darker, light areas get lighter.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer overlay-blend"></div>
<div class="blend-label">overlay</div>
</div>
</div>
</div>
<div class="code-block">
.overlay-blend {
mix-blend-mode: overlay;
}
</div>
</section>
<section class="example">
<h2>5. Darken and Lighten Modes</h2>
<p>Darken keeps the darkest pixels. Lighten keeps the lightest pixels.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer darken-blend"></div>
<div class="blend-label">darken</div>
</div>
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer lighten-blend"></div>
<div class="blend-label">lighten</div>
</div>
</div>
</div>
<div class="code-block">
.darken-blend {
mix-blend-mode: darken;
}
.lighten-blend {
mix-blend-mode: lighten;
}
</div>
</section>
<section class="example">
<h2>6. Color Dodge and Burn</h2>
<p>Dodge brightens, Burn darkens. Similar to photography techniques.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer color-dodge-blend"></div>
<div class="blend-label">color-dodge</div>
</div>
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer color-burn-blend"></div>
<div class="blend-label">color-burn</div>
</div>
</div>
</div>
<div class="code-block">
.color-dodge-blend {
mix-blend-mode: color-dodge;
}
.color-burn-blend {
mix-blend-mode: color-burn;
}
</div>
</section>
<section class="example">
<h2>7. Difference and Exclusion</h2>
<p>Subtract colors. Difference has more contrast. Exclusion is softer.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer difference-blend"></div>
<div class="blend-label">difference</div>
</div>
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer exclusion-blend"></div>
<div class="blend-label">exclusion</div>
</div>
</div>
</div>
<div class="code-block">
.difference-blend {
mix-blend-mode: difference;
}
.exclusion-blend {
mix-blend-mode: exclusion;
}
</div>
</section>
<section class="example">
<h2>8. Hue, Saturation, and Color</h2>
<p>These modes blend specific color properties.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer hue-blend"></div>
<div class="blend-label">hue</div>
</div>
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer saturation-blend"></div>
<div class="blend-label">saturation</div>
</div>
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer color-blend"></div>
<div class="blend-label">color</div>
</div>
</div>
</div>
<div class="code-block">
.hue-blend {
mix-blend-mode: hue;
}
.saturation-blend {
mix-blend-mode: saturation;
}
.color-blend {
mix-blend-mode: color;
}
</div>
</section>
<section class="example">
<h2>9. Luminosity Blend Mode</h2>
<p>Keeps the luminosity (brightness) of the bottom layer but uses the color of the top layer.</p>
<div class="demo">
<div class="blend-container">
<div class="blend-item">
<div class="base-layer image-layer"></div>
<div class="base-layer color-layer luminosity-blend"></div>
<div class="blend-label">luminosity</div>
</div>
</div>
</div>
<div class="code-block">
.luminosity-blend {
mix-blend-mode: luminosity;
}
</div>
</section>
<section class="example">
<h2>10. Text with Blend Modes</h2>
<p>Create interesting text effects by blending with backgrounds.</p>
<div class="demo">
<div class="text-blend-demo">
<div class="text-blend-bg"></div>
<div class="text-blend-content">Blended Text Effect</div>
</div>
</div>
<div class="code-block">
.text-blend-content {
mix-blend-mode: difference;
}
</div>
</section>
<section class="example">
<h2>11. Photo Color Grading</h2>
<p>Use blend modes to color grade photos like professional editors.</p>
<div class="demo">
<div class="photo-overlay">
<img class="photo-image" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="Mountain landscape">
<div class="photo-blend"></div>
</div>
</div>
<div class="code-block">
.photo-blend {
background: linear-gradient(45deg, #6a11cb, #2575fc);
mix-blend-mode: soft-light;
opacity: 0.7;
}
</div>
</section>
<section class="example">
<h2>12. UI Elements with Blend Modes</h2>
<p>Create modern UI effects with blend modes.</p>
<div class="demo">
<div class="ui-element">
<div class="ui-highlight"></div>
Modern UI Element with Blend Effect
</div>
</div>
<div class="code-block">
.ui-highlight {
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
mix-blend-mode: overlay;
}
</div>
</section>
</div>
<script>
// Simple comparison slider
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.comparison-slider');
if (slider) {
const handle = slider.querySelector('.comparison-handle');
const after = slider.querySelector('.comparison-after');
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
document.addEventListener('mousemove', moveHandle);
document.addEventListener('mouseup', stopMove);
});
function moveHandle(e) {
const sliderRect = slider.getBoundingClientRect();
let position = (e.clientX - sliderRect.left) / sliderRect.width;
position = Math.max(0, Math.min(1, position));
after.style.width = (position * 100) + '%';
handle.style.left = (position * 100) + '%';
}
function stopMove() {
document.removeEventListener('mousemove', moveHandle);
document.removeEventListener('mouseup', stopMove);
}
// Touch support for mobile
handle.addEventListener('touchstart', function(e) {
e.preventDefault();
document.addEventListener('touchmove', moveHandleTouch);
document.addEventListener('touchend', stopMoveTouch);
});
function moveHandleTouch(e) {
const sliderRect = slider.getBoundingClientRect();
let position = (e.touches[0].clientX - sliderRect.left) / sliderRect.width;
position = Math.max(0, Math.min(1, position));
after.style.width = (position * 100) + '%';
handle.style.left = (position * 100) + '%';
}
function stopMoveTouch() {
document.removeEventListener('touchmove', moveHandleTouch);
document.removeEventListener('touchend', stopMoveTouch);
}
}
});
</script>
</body>
</html>Understanding Blend Modes
Popular Blend Modes
- Multiply: Darkens - like markers on paper
- Screen: Lightens - like projecting light
- Overlay: Contrasts - darkens darks, lightens lights
- Difference: Inverts colors - creates dramatic effects
- Hue: Keeps hue from top, luminosity and saturation from bottom
- Color: Keeps hue and saturation from top, luminosity from bottom
When to Use Each Mode
- Multiply: Adding shadows or dark textures
- Screen: Adding light effects or glows
- Overlay: Enhancing contrast and vibrancy
- Difference: Creating inversion effects
- Color: Recoloring images or elements
- Luminosity: Applying texture without changing color
Blend Mode Best Practices
Do's
- Experiment with different blend modes
- Use subtle opacity changes for better control
- Test on various backgrounds and devices
- Combine with gradients for smooth transitions
- Use for non-critical visual enhancements
Don'ts
- Don't overuse extreme blend effects
- Avoid using for important text content
- Don't forget to test color contrast
- Avoid complex blends on performance-sensitive elements
- Don't rely solely on blends for visual hierarchy
Real-World Uses of Blend Modes
Practical Applications
- Image Color Grading: Add color tints and moods to photos
- Text Effects: Make text stand out on busy backgrounds
- UI Enhancements: Create modern buttons and controls
- Background Patterns: Blend patterns with colors
- Photo Filters: Create Instagram-like filters
- Data Visualization: Enhance charts and graphs
- Artistic Effects: Create painterly or artistic looks
Browser Support & Tips
Compatibility Guide
CSS blend modes work in all modern browsers, but there are some things to keep in mind.
- Supported in Chrome 41+, Firefox 32+, Safari 8+, Edge 79+
- Not supported in Internet Explorer
- Some mobile browsers may have limited support
- Use feature detection with @supports for critical effects
- Provide fallbacks for unsupported browsers
Ready to Try CSS Blend Modes?
Experiment with these CSS blend mode examples in our interactive editor. Try different modes, adjust colors, and see how they interact in real-time.