Pixi.js Blend Modes: How to Apply Add and Multiply

This article explains what blend modes are in digital graphics and provides a direct, practical guide on how to apply the ADD and MULTIPLY blend modes to sprites in Pixi.js. You will learn how these modes manipulate pixel colors and the exact JavaScript code required to implement them in your WebGL applications.

What Are Blend Modes?

Blend modes are mathematical formulas used to determine how the pixels of a top layer (source) mix with the pixels of the layer beneath it (destination). In 2D game development and web graphics, blend modes are essential for creating realistic lighting, shadows, and special effects.

The two most common blend modes are:

How to Apply Blend Modes in Pixi.js

In Pixi.js, every sprite has a blendMode property. You can change this property at any time to alter how the sprite renders over other elements.

Depending on your Pixi.js version and project setup, you can set blend modes using either string keywords or the global BLEND_MODES object.

1. Applying the ADD Blend Mode

To make a sprite glow or brighten the background, assign the 'add' blend mode to your sprite:

import { Application, Sprite, Assets } from 'pixi.js';

// Initialize PixiJS Application
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// Load texture and create sprite
const texture = await Assets.load('path/to/fire_glow.png');
const sprite = new Sprite(texture);

// Apply the ADD blend mode
sprite.blendMode = 'add'; 

// Alternative method using PIXI constants:
// sprite.blendMode = PIXI.BLEND_MODES.ADD;

app.stage.addChild(sprite);

2. Applying the MULTIPLY Blend Mode

To use a sprite to cast shadows or darken the background beneath it, assign the 'multiply' blend mode:

import { Application, Sprite, Assets } from 'pixi.js';

// Initialize PixiJS Application
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// Load texture and create sprite
const texture = await Assets.load('path/to/shadow_texture.png');
const sprite = new Sprite(texture);

// Apply the MULTIPLY blend mode
sprite.blendMode = 'multiply';

// Alternative method using PIXI constants:
// sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

app.stage.addChild(sprite);

Important Considerations