CSS Blend Mode Playground

Blend mode studio

Mix & background blend playground

Compare all 16 CSS blend modes on brand colors, mesh scenes, and type knockouts — then copy production-ready CSS with isolation baked in.

Property

Presets

Colors

Top layerBase

Opacity0.85

Scene

Layer shape

Isolate blending groupCheckerboard behind stage

Live stage

multiply

multiply · DarkenMultiplies channels — great for shadows and print-like overlays. White disappears; darks deepen. Classic for photo filters.

.blend-stage {
  isolation: isolate;
  position: relative;
  background: 
        radial-gradient(ellipse at 15% 20%, #fb7185, transparent 45%),
        radial-gradient(ellipse at 85% 15%, #38bdf8, transparent 42%),
        radial-gradient(ellipse at 50% 85%, #a78bfa, transparent 48%),
        linear-gradient(160deg, #1d4ed8, color-mix(in oklab, #1d4ed8 55%, #0f172a))
      ;
  background-size: cover;
}
.blend-layer {
  position: absolute;
  inset: 0;
  background: #e11d48;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

Mode gallery

Compare all modes

Same colors, every mode — click to select.

Mesh gradients CSS filters Gradients

Hue / saturation / color / luminosity can differ slightly across engines. Preview uses your current browser.

How to use this tool

A practical walkthrough

Professional blend studio: mix vs background modes, scene stages, layer shapes, isolation, grouped mode gallery, and production CSS export.

Pick mix-blend-mode or background-blend-mode.
Start from a preset or set brand colors and a scene (mesh, photo, type).
Browse the grouped gallery or compare-all grid to choose a mode.
Copy or download CSS with optional isolation.

Blend modes are hard to reason about without a live stage — presets and compare views turn guesswork into a deliberate brand wash.

A LITTLE MORE CLARITY

Good questions. Useful answers.

01Do all blend modes look identical in every browser?

Common modes (multiply, screen, overlay) are very close. Hue, saturation, color, and luminosity can differ slightly by engine — always spot-check in your target browsers.

02When should I use isolation?

Turn on isolation when a blended layer should not mix with content behind the stage (headers over photos, cards with brand washes). It creates a new stacking context for mix-blend-mode.

03mix-blend-mode vs background-blend-mode?

mix-blend-mode blends an element with whatever is behind it. background-blend-mode blends multiple background layers on the same element. Use background when you control both layers as CSS backgrounds.

Need a reference? Browse the HEX and RGB color code chart. Looking for more? Browse Our Tools.

.blend-stage { isolation: isolate; position: relative; background: radial-gradient(ellipse at 15% 20%, #fb7185, transparent 45%), radial-gradient(ellipse at 85% 15%, #38bdf8, transparent 42%), radial-gradient(ellipse at 50% 85%, #a78bfa, transparent 48%), linear-gradient(160deg, #1d4ed8, color-mix(in oklab, #1d4ed8 55%, #0f172a)) ; background-size: cover; } .blend-layer { position: absolute; inset: 0; background: #e11d48; mix-blend-mode: multiply; opacity: 0.85; }

A practical walkthrough

Professional blend studio: mix vs background modes, scene stages, layer shapes, isolation, grouped mode gallery, and production CSS export.

Pick mix-blend-mode or background-blend-mode.

Start from a preset or set brand colors and a scene (mesh, photo, type).

Browse the grouped gallery or compare-all grid to choose a mode.

Copy or download CSS with optional isolation.

Blend modes are hard to reason about without a live stage — presets and compare views turn guesswork into a deliberate brand wash.

Mix & background blend playground

A practical walkthrough

Keep your ideas moving.

Animated Mesh Gradient Generator

Gradient Generator

CSS Filter Generator

Good questions. Useful answers.

Mix & background blend playground

A practical walkthrough

Keep your ideas moving.

Animated Mesh Gradient Generator

Gradient Generator

CSS Filter Generator

Good questions. Useful answers.