Built-in toolFree · No signup

CSS Blend Mode Explorer

Explore all 16 CSS blend modes interactively. Choose foreground and background colours, then see every mix-blend-mode value applied side-by-side. Click any mode to select it and copy its CSS. Includes both mix-blend-mode (elements) and background-blend-mode (gradients on elements) output.

Share on X LinkedIn

Foreground#1D9E75

Background base#2563EB

Selected:multiply

normal

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

Click any card to select it. Background is linear-gradient(135deg, #2563EB, #000)…

CSS Output

.blend-element {  mix-blend-mode: multiply;  isolation: isolate;} /* For background-blend-mode (on same element) */.blend-bg {  background: linear-gradient(135deg, #1D9E75, transparent),              linear-gradient(135deg, #2563EB, #000);  background-blend-mode: multiply;}

Was this tool helpful?

How to use

Set your colours

Pick a foreground colour and background colour. A gradient is used for the background layer to show the effect more clearly.

Compare modes

All 16 blend modes are shown in a grid simultaneously — scan them to find the effect you want.

Click to select

Click any blend mode card to select it. The selected card is highlighted and the CSS output updates.

Copy CSS

Copy the mix-blend-mode and isolation declarations ready to paste into your stylesheet.