PixiJS Blend Modes — Compositing Visual Layers
In this tutorial, you will learn about PixiJS Blend Modes. We cover key concepts, practical examples, and best practices to help you master this topic.
PixiJS blend modes control how display objects Composite with the content behind them using GPU blending operations.
What You'll Learn
By the end of this guide, you will apply additive, multiply, screen, and overlay blend modes, use additive for light effects, screen for brightness, multiply for shadows, and build neon glow effects.
Additive Blending
sprite.blendMode = PIXI.BLEND_MODES.ADD;
// Brightens everything behind it (light effect)
Screen Blending
sprite.blendMode = PIXI.BLEND_MODES.SCREEN;
// Lighter areas stay, dark disappears
Multiply Blending
sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
// Darkens everything (shadow effect)
Neon Glow
var glowSprite = new PIXI.Sprite(texture);
glowSprite.blendMode = PIXI.BLEND_MODES.ADD;
glowSprite.alpha = 0.5;
glowSprite.scale.set(1.2);
var coreSprite = new PIXI.Sprite(texture);
coreSprite.blendMode = PIXI.BLEND_MODES.NORMAL;
container.addChild(glowSprite);
container.addChild(coreSprite);
Common Mistakes
1. Blend Mode on Wrong Element
The blend mode applies to the object and its children. It composites against everything below in the stage.
2. No Visible Difference
Blend modes need content behind them to show effects. Layer elements with blend modes over other content.
3. Multiply on Black
Multiply on black stays black because 0 * anything = 0.
4. Additive on White
Additive on white stays white because white + anything clips to white.
5. Performance Overhead
Blend modes are GPU operations. Using many different blend modes reduces batching.
Practice Questions
Q1: How do you set a blend mode? A: Set sprite.blendMode = PIXI.BLEND_MODES.ADD.
Q2: What blend mode creates a light effect? A: ADDITIVE brightens background content like a light source.
Q3: What blend mode darkens background? A: MULTIPLY creates shadow or darkening effects.
Q4: How many blend modes does PixiJS support? A: 20+ including NORMAL, ADD, MULTIPLY, SCREEN, OVERLAY, DARKEN, LIGHTEN, COLOR_DODGE, COLOR_BURN, etc.
Q5: Do blend modes affect performance? A: Yes, slightly. Changing blend modes breaks render batching.
Challenge: Build a magical spell effect with a core circle and an additive outer glow. Add particles with additive blending for sparks.
FAQ
Try It Yourself
Compare different blend modes.
<!DOCTYPE html>
<html>
<head>
<title>PixiJS Blend Modes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Blend Mode Demo</h2>
<select onchange="changeBlend(this.value)">
<option value="NORMAL">Normal</option>
<option value="ADD">Additive</option>
<option value="MULTIPLY">Multiply</option>
<option value="SCREEN">Screen</option>
<option value="OVERLAY">Overlay</option>
</select>
<script>
var app = new PIXI.Application({ width: 400, height: 300, background: 0x333333 });
document.body.appendChild(app.view);
// Background pattern
var bg = new PIXI.Graphics();
for (var x = 0; x < 400; x += 40) {
for (var y = 0; y < 300; y += 40) {
bg.beginFill((x + y) % 80 === 0 ? 0x666666 : 0x444444);
bg.drawRect(x, y, 40, 40);
bg.endFill();
}
}
app.stage.addChild(bg);
// Gradient circle
var circle = new PIXI.Graphics();
circle.beginFill(0xffffff, 0.8);
circle.drawCircle(0, 0, 60);
circle.endFill();
circle.x = 200;
circle.y = 150;
// Colorful inner shapes
var inner = new PIXI.Graphics();
inner.beginFill(0xff6b35);
inner.drawRect(-30, -30, 60, 60);
inner.endFill();
inner.beginFill(0x4ecdc4);
inner.drawCircle(20, -10, 20);
inner.endFill();
app.stage.addChild(circle);
app.stage.addChild(inner);
function changeBlend(mode) {
circle.blendMode = PIXI.BLEND_MODES[mode];
}
</script>
</body>
</html>
What's Next
Create particle effects.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro