Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
Usage Examples
CDN •
Vanilla •
React •
Vue
source in ./examples
Share your seeds & creations!
SeedScript
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9"></script>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> <!-- Latest with default mounting point -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9"></script>
<!-- optionally pin to a version @x.x.x -->
<script type="module" src="https://unpkg.com/gradient-gl@1.4.1?seed=a2.eba9"></script>
<!-- optionally set the mount selector -->
<!-- mount inside the <main> tag -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9&selector=main"></script>
<!-- mount inside the .wrapper>content -->
<!-- note: any valid css selector can be used -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9&selector=.wrapper>.content"></script>
<!-- mount inside the #app -->
<!-- note hash needs to be escaped as %23 -->
<!-- #app → %23app -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9&selector=%23app"></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 usage -
Canvas 2D– CPU-only, main-thread load, imperative updates -
CSS– GPU-composited, limited complexity, best for static -
WebGL– GPU-accelerated, shader-driven, optimal balance -
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