CSS Blend Mode Generator
Create stunning color blend effects with CSS mix-blend-mode and background-blend-mode.
Visualize all 16 blend modes and generate code instantly.
Original
With multiply Blend
Uses an overlay element with mix-blend-mode
.container {
position: relative;
}
.container img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
inset: 0;
background-color: #6366f1;
mix-blend-mode: multiply;
opacity: 1;
pointer-events: none;
}All 16 CSS Blend Modes
Compare all blend modes side by side. Click any card to apply that blend mode.
Understanding CSS Blend Modes
mix-blend-mode
Blends an element with its backdrop (the content behind it). Perfect for creating color overlays on images using an absolutely positioned element.
background-blend-mode
Blends an element's background layers together. Use this when you have both a background-image and background-color on the same element.
Common Use Cases
Duotone effects (multiply), lightening photos (screen), high contrast overlays (hard-light), and color tinting (color or hue).
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes