---
title: Background Shaders
description: A free visual builder for animated WebGL backgrounds. Tune a style live in the browser, or export the same dependency-free snippet and agent prompt straight from the CLI.
---

Background Shaders is a free tool at [brandstack.dev/tools/shaders](https://brandstack.dev/tools/shaders). It lets you design animated backgrounds, the kind you see on Linear, Vercel, and Anthropic landing pages, without writing WebGL code yourself.

No login required.

## Run it from the command line (recommended for agents)

```sh
npx @brandstack/cli shaders --list                # the five styles
npx @brandstack/cli shaders dither --params       # a style's tunable parameters
npx @brandstack/cli shaders dither --target react \
  --set accentColor=#d4ff3a --set animationSpeed=0.1 \
  --out shader-background.tsx
npx @brandstack/cli shaders aurora --prompt --theme dark   # agent prompt instead of code
```

Offline, no account. The CLI emits the *identical* snippet and agent prompt the website's copy/download buttons produce — snippet generation is pure text work and runs anywhere. Only the live tuning preview needs a browser (it renders real WebGL); that part is browser-only by nature, so tune visually on the site when you want to see it move, then export from either surface.

## What it does

Pick a shader style, adjust every visual parameter using live controls, and watch the result render in real time. When you're happy with the output, export it three ways:

- **Copy prompt for agent**: a structured prompt for Claude Code, Cursor, Codex, or any coding agent, containing your tuned parameters, the full snippet, and the integration contract
- **Copy snippet**: the raw self-contained code on your clipboard
- **Download**: the snippet as a file (`.html` for plain HTML, `.tsx` for React)

The exported code is vanilla WebGL with zero dependencies. No `three.js`, no `npm install`.

## Shader styles

Each style has its own set of parameters:

- **Dither**: a pixelated Bayer-dither pattern. This is the style used on the Brand Stack marketing hero
- **Aurora**: a smooth mesh-gradient glow
- **Grain**: animated film grain
- **Plasma**: fluid, flowing color
- **Scanlines**: a CRT-style effect

Common controls include colors, pixel size, animation speed, and mouse bloom, varying by style.

## How to use it in the browser

1. Go to [brandstack.dev/tools/shaders](https://brandstack.dev/tools/shaders)
2. Pick a shader style from the tabs
3. Tune the parameters; the preview updates instantly
4. Pick the target framework (plain HTML or React)
5. Click **Copy prompt for agent**, **Copy snippet**, or **Download**

## What the exports contain

The agent prompt names the framework target, lists every tuned parameter for review, inlines the full snippet, and spells out the integration contract: positioning, z-index, cleanup, reduced motion, and theme syncing. Paste it into your agent and the integration lands correctly on the first pass.

The snippet itself is production-minded by default: the canvas fills its host container and never blocks clicks, a `ResizeObserver` keeps it in sync with the container rather than the window, and the render loop pauses under `prefers-reduced-motion`. The destroy callback cancels the animation frame, removes window listeners, and deletes the WebGL program, buffers, and shaders. It deliberately does **not** call `WEBGL_lose_context` — permanently killing the context breaks remounting on the same canvas (e.g. during hot reload); releasing the program and buffers is what frees the GPU resources.

## For AI agents

Prefer the CLI (above) — the exports are deterministic text, so there is nothing a browser adds. This page is also served as plain markdown at [/tools/shaders.md](https://brandstack.dev/tools/shaders.md), and the tool is listed with instructions in [/llms.txt](https://brandstack.dev/llms.txt).

## Tips

- Use the **Dither** shader as a starting point for a premium landing-page feel; it reads as high-end without being distracting
- Keep animation speed low for backgrounds that don't compete with page content
- The prompt export captures exactly what you tuned; there's no drift between the preview and what the agent integrates

## Related

- [OG Image Preview & Builder](/tools/og-image-preview)
- [Color Palette from Image](/tools/color-palette)
- [Launch Image Resizer](/tools/launch-image-resizer)