demo
Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
Usage Examples
CDN •
Vanilla •
React •
Vue
source in ./examples
Share your seeds & creations!
One-Liner Script Tag
SeedScript
<script type="module" src="https://unpkg.com/gradient-gl?seed=a2.eba9"></script>
npm install gradient-gl
import 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 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