Background Blend Modes

Explore 15 Different CSS Blend Modes

Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Color Burn
Hard Light
Soft Light
Difference
Exclusion
Hue
Saturation
Color
Luminosity

About Blend Modes

CSS background-blend-mode property blends multiple background layers together. Each card combines three layers: a base color (#000f89), radial gradients, and a linear gradient pattern.

How it works: The blend mode determines how the layers combine mathematically to produce the final colors you see. Different modes create dramatically different visual effects.

Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Color Burn
Hard Light
Soft Light
Difference
Exclusion
Hue
Saturation
Color
Luminosity