# Blur, glows & shadows

> A gaussian blur applied to each shape's distance field gives neon glows, soft drop shadows and motion blur without filters or extra passes.

Source: https://pixi-silk.schmooky.dev/docs/blur-and-shadows/

Live demo `glow` (source):

```ts
import { SilkGraphics } from 'pixi-silk';
import { defineDemo } from './runtime';

// `blur` is a gaussian applied to the distance field: no filters, no extra passes.
export default defineDemo({
    size: [480, 220],
    background: 0x050507,
    controls: {
        blur: { type: 'range', label: 'blur (σ)', min: 0, max: 30, step: 0.5, value: 12, unit: 'px' },
    },
    setup({ stage, params, tick }) {
        const g = new SilkGraphics();

        stage.addChild(g);
        tick((t) => {
            const pulse = 0.8 + Math.sin(t * 2) * 0.2;

            g.clear();
            // neon: a blurred copy under a crisp stroke
            g.circle(110, 110, 60).stroke({ width: 8, color: 0xff375f, blur: params.blur * pulse, alpha: 0.9 });
            g.circle(110, 110, 60).stroke({ width: 3, color: 0xffd1dc });
            // soft shadow: offset, blurred, translucent
            g.roundRect(260, 60 + 18, 180, 100, 24, 0.6).fill({ color: 0x000000, alpha: 0.9, blur: params.blur });
            g.roundRect(260, 60, 180, 100, 24, 0.6).fill(0x2c2c2e);
            g.circle(300, 110, 16).fill({ color: 0x30d158, blur: params.blur * 0.4 });
            g.circle(300, 110, 7).fill(0xe8ffe8);
        });
    },
});
```

Every paint takes a `blur` (the gaussian standard deviation σ, in local units). Silk blurs the
**distance field**, not the pixels. Coverage becomes `0.5 - 0.5 * erf(d / (sigma * sqrt(2)))`. The
shape's quad grows by 3σ. A blurred shape costs the same as any other primitive.

## Glows

Draw a blurred copy under a crisp one:

```ts
g.circle(110, 110, 60).stroke({ width: 8, color: 0xff375f, blur: 12, alpha: 0.9 }); // glow
g.circle(110, 110, 60).stroke({ width: 3, color: 0xffd1dc });                        // core
```

## Soft shadows

Offset, blur and fade a dark copy of the shape before drawing it:

```ts
g.roundRect(20, 20 + 18, 180, 100, 24, 0.6).fill({ color: 0x000000, alpha: 0.45, blur: 24 });
g.roundRect(20, 20, 180, 100, 24, 0.6).fill(0x1c1c1e);
```

The Live Activity cards in the [Showcase](/showcase/) use this pattern. Their shadow matches the
reference image (σ 30.5 px, 37.5 px down, 45 % black).

## Motion blur and soft ends

A blurred stroke makes a cheap motion trail. Blurring the first and last ticks of a scale looks like
depth of field. See the espresso timer on the Live Activities sheet. Silk dithers blurred paints like
gradients, so large soft shadows don't band.

> **TIP**
> Blur is exact for straight edges and nearly exact for corners. For huge blurs on complex paths, you
> can still put a Pixi `BlurFilter` over the object. With `createSilkApp`, filters inherit the screen
> resolution.