Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
Usage Examples
CDN •
Vanilla •
React •
Vue
source in ./examples
Share your seeds & creations!
One script tag:
<script type="module" src="https://unpkg.com/gradient-gl?seed=c1.eba9"></script>npm install gradient-glimport gradientGL from 'gradient-gl'
// Mounts to <body>
gradientGL('c1.eba9')
// Mounts inside #app
gradientGL('c1.eba9', '#app')
// Returns the program
const program = await gradientGL('c1.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.
Default canvas style: z-index: -1, no mix-blend-mode.
An opaque html/body background covers a -1 canvas. Raise z-index for fixed chrome or stacking contexts that sit above it. Set mix-blend-mode when the gradient should grade against page content.
#gradient-gl {
z-index: 0 !important;
mix-blend-mode: color !important;
}Library defaults use !important. Match that in overrides.
export default {
build: {
target: 'esnext',
},
}<script type="module">
import gradientGL from 'https://unpkg.com/gradient-gl'
gradientGL('c1.eba9')
</script><script type="module">
import gradientGL from 'https://esm.sh/gradient-gl'
gradientGL('c1.eba9')
</script><!-- latest, mounts on body -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=c1.eba9"></script>
<!-- pin a version -->
<script type="module" src="https://unpkg.com/gradient-gl@1.4.1?seed=c1.eba9"></script>
<!-- mount inside <main> -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=c1.eba9&selector=main"></script>
<!-- any CSS selector works -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=c1.eba9&selector=.wrapper>.content"></script>
<!-- # must be escaped: #app → %23app -->
<script type="module" src="https://unpkg.com/gradient-gl?seed=c1.eba9&selector=%23app"></script>{shader}.{speed}{hue}{sat}{light}
- Shader:
[a-z][0-9](e.g.,c1,n3) - Options:
[0-9a-f](hex values)
Explore and generate seeds in the playground
IDs are alphabetical. Import the live list with import { shaderIds } from 'gradient-gl'.
| Series | IDs | Character |
|---|---|---|
| b | b1 b2 b3 b4 |
classic layered / radial |
| c | c1 c4 |
contrast duotone flow |
| f | f1 f3 |
fluid RGB noise |
| l | l1 l3 l5 |
liquid warp |
| n | n1 n2 n3 n4 |
noisy color islands |
| s | s1 s3 |
soft shade blobs |
n1/n2 are softer blends; n3/n4 are sharper islands.
Animated gradient background techniques, slowest to fastest:
SVG: CPU-only, DOM-heavy, poor scaling, high memoryCanvas 2D: CPU-only, main-thread load, imperative updatesCSS: GPU-composited, limited complexity, best for static workWebGL: GPU shaders, wide supportWebGPU: faster where available, thinner browser support
Note
WebGPU is faster where it runs. WebGL covers more browsers and is enough for animated gradients.
TODO: Interactive benchmark app