Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
Usage Examples
Vanilla •
React •
Vue
source in ./examples
Share your seeds & creations!
npm install gradient-glimport gradientGL from 'gradient-gl'
// Mounts to <body>
gradientGL('a2.eba9')
// Mounts inside #app
gradientGL('a2.eba9', '#app')
// Access shader program if needed
const program = await gradientGL('a2.eba9')- No selector: creates and styles a
<canvas>in<body> - Selector to an element: creates and styles a
<canvas>inside it - Selector to a
<canvas>: uses it directly, no styles or DOM changes
Styles are overridable.
export default {
build: {
target: 'esnext',
},
}<script type="module">
import gradientGL from 'https://unpkg.com/gradient-gl'
gradientGL('a2.eba9')
</script><script type="module">
import gradientGL from 'https://esm.sh/gradient-gl'
gradientGL('a2.eba9')
</script> <!-- 🚧 not implemented -->
<script src=xxx@latest/seed/a2.eba9"></script>{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
Animated Gradient Background Techniques
(Slowest → Fastest)
SVG– CPU-only, DOM-heavy, poor scaling, high memory usageCanvas 2D– CPU-only, main-thread load, imperative updatesCSS– GPU-composited, limited complexity, best for staticWebGL– GPU-accelerated, shader-driven, optimal balanceWebGPU– 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