# Background Shaders

> Tune WebGL background shaders live (dither, aurora, grain, plasma, scanlines). Copy a paste-into-Cursor prompt or download a self-contained HTML snippet. No deps, no signup.

Free WebGL background shader builder. Pick a style (Bayer dither, mesh-gradient aurora, animated film grain, fluid plasma, or CRT scanlines), tune every parameter live (pixel size, colors, animation speed, mouse bloom), then copy a structured prompt for your coding agent or download a self-contained vanilla-WebGL snippet to drop into any HTML page or React component. Zero dependencies, respects prefers-reduced-motion, theme-aware.

## Command line (recommended for agents)

npx @brandstack/cli shaders <style> [--set id=value …] [--target html|react] [--theme light|dark] [--prompt] [--out file] — offline; emits the identical snippet/prompt the website's copy and download buttons produce. `--list` shows styles, `--params` shows a style's tunable parameters.

The CLI runs the same engine as this page — same logic, same output contract — with no browser and no account. Browser automation below is the fallback.

## How to use it

1. Agents: run `npx @brandstack/cli shaders dither --target react --set accentColor=#d4ff3a --out shader-background.tsx`. Every parameter the web controls expose is settable with `--set` (list them with `--params`).
2. In the browser: pick a shader style (Bayer dither, aurora, film grain, plasma, or CRT scanlines) and tune the parameters live — this visual preview is the part that needs a browser.
3. Pick the target (plain HTML or React), then either "Copy prompt for agent" to hand the integration to a coding agent, or copy / download the snippet directly.
4. The exported snippet is self-contained; integration steps are embedded in the agent prompt.

## Output

A structured agent prompt, or a self-contained vanilla-WebGL HTML/React snippet with zero dependencies that respects prefers-reduced-motion. The live tuning preview requires WebGL and is browser-only; the exports are plain text and run anywhere.

## Links

- Use the tool: https://www.brandstack.dev/tools/shaders
- All free tools: https://www.brandstack.dev/tools (markdown: https://www.brandstack.dev/tools.md)
- Agent index: https://www.brandstack.dev/llms.txt

Background Shaders is a free tool by Brand Stack, the AI photo studio for
product marketing. No ads, no signup. Start free: https://www.brandstack.dev/sign-up