Article Categories

Selected Reading

Blending mode of each background layer with CSS

CSS Web Development Front End Technology

The CSS background-blend-mode property sets the blending mode of each background layer. It defines how background images should blend with each other and with the background color.

Syntax

selector {
    background-blend-mode: blend-mode-value;
}

Possible Values

Value	Description
`normal`	Default blending mode, no blending effect
`multiply`	Multiplies colors, resulting in darker images
`screen`	Inverts, multiplies, and inverts again, resulting in lighter images
`overlay`	Combines multiply and screen modes
`darken`	Keeps the darkest color from each layer
`lighten`	Keeps the lightest color from each layer
`difference`	Subtracts colors to create high contrast effects

Example: Darken Blend Mode

The following example demonstrates the darken blend mode with multiple background images −

<!DOCTYPE html>
<html>
<head>
<style>
    .blend-container {
        width: 300px;
        height: 200px;
        background-color: #4CAF50;
        background-image: 
            linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
            linear-gradient(135deg, rgba(255,255,0,0.7), rgba(255,0,255,0.7));
        background-blend-mode: darken;
        border: 2px solid #333;
        margin: 20px;
    }
    
    .normal-blend {
        background-blend-mode: normal;
    }
</style>
</head>
<body>
    <h2>Background with Darken Blend Mode</h2>
    <div class="blend-container"></div>
    
    <h2>Background with Normal Blend Mode (Comparison)</h2>
    <div class="blend-container normal-blend"></div>
</body>
</html>

Two rectangular containers appear on the page. The first shows darkened, blended gradients creating a rich, dark color effect. The second shows the same gradients without blending for comparison, appearing brighter and more transparent.

Example: Multiple Blend Modes

Here's an example showing different blend modes applied to the same background layers −

<!DOCTYPE html>
<html>
<head>
<style>
    .blend-demo {
        width: 200px;
        height: 120px;
        margin: 10px;
        display: inline-block;
        background-color: #FF6B35;
        background-image: 
            radial-gradient(circle, rgba(0,150,255,0.8), transparent),
            linear-gradient(45deg, rgba(255,255,255,0.3), rgba(0,0,0,0.3));
        text-align: center;
        line-height: 120px;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 2px black;
    }
    
    .multiply { background-blend-mode: multiply; }
    .screen { background-blend-mode: screen; }
    .overlay { background-blend-mode: overlay; }
    .difference { background-blend-mode: difference; }
</style>
</head>
<body>
    <div class="blend-demo multiply">Multiply</div>
    <div class="blend-demo screen">Screen</div>
    <div class="blend-demo overlay">Overlay</div>
    <div class="blend-demo difference">Difference</div>
</body>
</html>

Four boxes appear in a row, each labeled with their blend mode name. Each box shows different visual effects: Multiply creates darker tones, Screen creates lighter effects, Overlay combines both, and Difference creates high-contrast color inversions.

Conclusion

The background-blend-mode property offers powerful control over how background layers interact. Experiment with different blend modes to create unique visual effects for your web designs.

Samual Sam

Updated on: 2026-03-15T13:16:32+05:30

124 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next