Skip to content

Blend Mode Explorer

Understand how each blend mode works and experiment with stacking them for beautiful effects.

Darken Modes

Multiply

Darken

How it works

Multiplies the base and blend colours, always resulting in a darker colour. White disappears, black stays.

Formula

Result = Base × Blend

Best used for

Adding shadows, creating depth, overlaying textures on light backgrounds.

Preview

Multiply

Stacking Presets

Click to view code and apply to playground

Backdrop

Upload an image

Test blend modes on your own images

Blend Layers

Drag to reorder

Layer 1
50%

Live Preview

Blend layers applied to the image overlay — a common real-world use case

Featured

Blend Modes in Action

Colour overlays with blend modes create striking hero sections, duotone effects, and branded imagery.

Design Engineer
Creating visual effects

How it works

Gradient
+
multiply
=Result

Code

CSS
/* Container with backdrop */
.blend-container {
  position: relative;
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
}

/* Blend layers (stacked with position: absolute) */
.layer-1 {
  background-color: #ff0000;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* Alternative: background-blend-mode for single element */
.single-element {
  background: 
    #ff0000,
    linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
  background-blend-mode: multiply;
}