Search pages

Search all CSS Showcase pages by name

CSS Blend Modes

Create stunning visual effects by blending colours 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 colours mix with the colours 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!

Two Types of Blending
mix-blend-mode blends an element with its backdrop, while background-blend-mode blends multiple background layers together.
mix-blend-mode
css

mix-blend-mode

The mix-blend-mode property blends an element with everything behind it — backgrounds, images, text, the whole backdrop.

Text Overlay Effect
Large text using difference blend mode creates an inverted-colour effect against a gradient background.

BLEND

css
Image Duotone Effect
Overlay a coloured gradient with multiply blend mode to create a duotone effect on images or patterns.
css
Logo Adaptation
Using difference blend mode, a logo automatically contrasts with any background — light or dark.
LOGO

Light Background

LOGO

Dark Background

css

background-blend-mode

Use background-blend-mode to blend multiple background layers together. This creates rich, complex effects without extra elements.

Gradient + Pattern Blend
A colour gradient blended with a repeating pattern using overlay mode.

Beautiful Blending

Gradient overlaid on pattern

css
Multiple Gradient Blend
Three gradient layers blended with screen mode create vibrant, overlapping colour fields.
css
Texture Overlay
A subtle diagonal line texture blended over a gradient using multiply mode adds depth and dimension.

Textured Effect

Adding depth with blend modes

css

Real-World Examples

Here's how blend modes solve real design problems — from adaptive text to colourful shadows.

Adaptive Dark Mode Text
Text with mix-blend-mode: difference automatically contrasts against any background — no theme-specific styles needed.

Adaptive Text

Light theme

Adaptive Text

Dark theme

css
Colourful Shadows
A blurred pseudo-element with mix-blend-mode creates a vivid, colourful shadow effect behind a card.

Vibrant Card

With blended shadows

css

Performance Tips

Blend modes can be GPU-intensive. Follow these best practices to keep things smooth.

Isolate Blending with isolation: isolate
Create a new stacking context to prevent blend modes from affecting elements outside the container.
  • 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 stacked on top of each other can be slow
  • Feature detection: Use @supports (mix-blend-mode: multiply) for progressive enhancement
css
Feature Detection with @supports
Always design with blend modes as an enhancement — your design should still work when blend modes aren't supported.
  • Chrome/Edge: 35+ — fully supported
  • Firefox: 32+ — fully supported
  • Safari: 8+ — fully supported
  • Internet Explorer: Not supported — use @supports for graceful degradation
css