gradient-gl

Deterministic WebGL Gradient Animations

Playground

Tiny WebGL library for


Procedural Gradient Animations


Deterministic - Seed-driven

---

---

#### Easiest Usage:
One-Liner Script Tag

> SeedScript

``html

`

> read more

---

Usage

`sh
npm install gradient-gl
`

`javascript
import gradientGL from 'gradient-gl'

// Mounts to
gradientGL('a2.eba9')

// Mounts inside #app
gradientGL('a2.eba9', '#app')

// Access shader program if needed
const program = await gradientGL('a2.eba9')
`

$3

- No selector: creates and styles a in
- Selector to an element: creates and styles a inside it
- Selector to a : uses it directly, no styles or DOM changes

> Styles are overridable.

$3

`js
export default {
build: {
target: 'esnext',
},
}
`

$3

#### UNPKG

`html

`

#### ESM

`html

`

$3

`html













`

Seed Format

{shader}.{speed}{hue}{sat}{light}

- Shader: [a-z][0-9] (e.g., a2)
- Options: [0-9a-f] (hex values)

Explore and generate seeds in the playground

Performance

Animated Gradient Background Techniques

(Slowest → Fastest)

1. SVG – CPU-only, DOM-heavy, poor scaling, high memory usage
2. Canvas 2D – CPU-only, main-thread load, imperative updates
3. CSS – GPU-composited, limited complexity, best for static
4. WebGL – GPU-accelerated, shader-driven, optimal balance
5. WebGPU` – GPU-native, most powerful, limited browser support

> [!NOTE]
> While WebGPU is technically the fastest, WebGL remains the best choice for animated gradients due to its maturity, broad support, and optimal performance/complexity ratio.

> TODO: Interactive benchmark app

---

License

MIT