Understanding PSD Layer Blend Modes: A Visual Reference

Blend modes are the secret sauce of Photoshop compositing. They control how each layer's pixels interact with the pixels below, creating everything from subtle tonal adjustments to dramatic visual effects.

But when you're viewing PSD files outside of Photoshop — in a browser, a preview tool, or your own parser — which blend modes actually work? And which ones get approximated?

The Complete Blend Mode List

Photoshop supports 27 blend modes, organized into 6 groups based on their mathematical behavior:

Group 1: Normal

Group 2: Darken

These modes make the result darker than either input.

Group 3: Lighten

These modes make the result lighter than either input.

Group 4: Contrast

These modes increase or decrease contrast depending on the base color.

Group 5: Inversion

Group 6: Component (HSL)

These modes operate on individual color components.

Browser Support Summary

Out of 27 Photoshop blend modes, CSS mix-blend-mode supports 16 natively. The remaining 11 must be either:

1. Approximated using the closest supported mode
2. Rendered server-side using pixel-level math
3. Composited in a Web Worker using Canvas2D

Here's the mapping PeekPSD uses for unsupported modes:

Linear Burn    → Multiply (closest darken behavior)
Linear Dodge   → Screen (closest lighten behavior)
Vivid Light    → Hard Light (closest contrast behavior)
Linear Light   → Hard Light
Pin Light      → Hard Light
Hard Mix       → Normal (too different to approximate)
Subtract       → Difference (reversed but similar)
Divide         → Normal (no good approximation)
Dissolve       → Normal (random stipple can't be done in CSS)

How Blend Modes Work: The Math

Every blend mode is a mathematical function applied per-pixel, per-channel. Given a base pixel (from layers below) and a blend pixel (from the current layer), the mode produces a result pixel.

Multiply: The Most Useful Mode

Multiply is probably the most commonly used blend mode. It simulates layering transparent ink:

result = (base × blend) / 255

• White (255) × anything = anything (white disappears)
• Black (0) × anything = 0 (black stays black)
• 50% gray × 50% gray = 25% gray (it gets darker)

Common uses: Shadows, texture overlays, darkening effects, simulating printed inks.

Screen: The Opposite of Multiply

Screen simulates projecting light from two slides onto the same surface:

result = 255 - ((255 - base) × (255 - blend)) / 255

• Black (0) disappears
• White (255) stays white
• Everything else gets lighter

Common uses: Glow effects, light leaks, brightening shadows.

Overlay: The Best of Both

Overlay combines Multiply and Screen based on the base color:

if (base < 128):
    result = 2 × base × blend / 255
else:
    result = 255 - 2 × (255 - base) × (255 - blend) / 255

Dark areas get darker (Multiply), light areas get lighter (Screen). This preserves the overall tonal distribution while boosting contrast.

Common uses: Adding texture, enhancing contrast, color grading.

Blend Modes and Opacity

Blend modes interact with opacity in a specific way:

final = base × (1 - opacity) + blendResult × opacity

This means:

• At 0% opacity, the blend mode has no effect
• At 100% opacity, you see the full blend mode result
• At 50% opacity, you get a mix of the original and the blended result

Fill Opacity vs. Layer Opacity

Photoshop also has a fill opacity that works differently from layer opacity for certain blend modes. Fill opacity only affects the layer's pixel content, not its effects (drop shadow, stroke, etc.).

This distinction matters when rendering PSDs in external tools. Getting it wrong means incorrect compositing for layers that have both effects and non-100% fill opacity.

Practical Tips for PSD Viewers

If you're building or choosing a PSD viewing tool, here's what matters most for blend mode accuracy:

1. Get Multiply, Screen, and Overlay right. These three modes account for roughly 80% of blend mode usage in real PSD files.

2. Fall back gracefully. When a mode isn't supported, using Normal is better than showing nothing, but a close approximation is better than Normal.

3. Show the blend mode label. Even if the rendering is approximate, displaying "Overlay" or "Multiply" next to the layer name helps designers understand the intent.

4. Support Pass Through. Group blend modes default to "Pass Through" in Photoshop, which means the group doesn't create a compositing boundary. This is different from "Normal" and easy to get wrong.

The Bottom Line

Blend modes are fundamental to how PSD files look. Modern browsers support the most common modes natively through CSS, and Canvas2D provides pixel-level control for the rest. When viewing PSD files outside Photoshop, the question isn't whether blend modes work — it's how accurately the uncommon ones are rendered.

---

See blend modes in action: Open any PSD in PeekPSD and check the blend mode label on each layer.