Drop shadow on text

Text shadows improve contrast on photos and gradients. Parameters mirror CSS-like shadow syntax; balance blur vs performance on low-end GPUs.

Related styling topics appear in Lesson 16.

Interactive demo

Use offset when sampling SDF texture to implement drop shadow effect, see Pixi.js DropShadow Filter.

ts

const text = new Text({
    x: 50,
    y: 100,
    content: 'Hello, world!',
    fontSize: 30,
    fill: '#F67676',
    dropShadowColor: '#000000',
    dropShadowOffsetX: 2,
    dropShadowOffsetY: 2,
    dropShadowBlurRadius: 10,
});