CSSAwwwards
+ Submit tool
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.

#1D9E75
#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;}

How to use

01

Set your colours

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

02

Compare modes

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

03

Click to select

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

04

Copy CSS

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

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →