Blend Mode
A mathematical method for compositing pixel values from two layers. Includes modes like Multiply, Screen, and Overlay for varied visual effects.
A blend mode (also called a compositing or drawing mode) determines how the pixel values of an upper layer combine mathematically with those of a lower layer to produce the final displayed colour. Popularised by Photoshop in the 1990s, blend modes are now available in CSS via mix-blend-mode and in the Canvas 2D API.
Key blend modes and their formulae (values normalised to 0-1):
- Multiply:
Result = A × B. Darkens the image; useful for adding shadows and layering colours - Screen:
Result = 1 - (1-A)(1-B). Lightens the image; ideal for glow effects and highlights - Overlay: Applies Multiply to dark areas and Screen to light areas. Enhances contrast while preserving midtones
- Soft Light: A gentler version of Overlay. Produces natural tonal adjustments without harsh transitions
- Difference:
Result = |A - B|. Reveals differences between two images; used in change detection
Practical applications include:
- Texture compositing: Overlaying paper or canvas textures in Multiply mode to add tactile quality
- Colour grading: Using Soft Light with colour layers to achieve cinematic tones
- Logo compositing: Screen mode naturally removes black backgrounds from logos
In CSS, mix-blend-mode controls blending between elements, while background-blend-mode blends multiple background images within a single element. Both are GPU-accelerated, enabling real-time interactive effects without JavaScript computation overhead.