Install
Package
npm install sharegradient
The library is browser-focused and dependency-free at runtime.
Bring your designs to life with smooth, shared animated gradients
The lightweight, framework-agnostic engine for
high-performance shared & animated gradients.
Small runtime footprint. Zero dependencies. Built around the Canvas API and CSS custom properties.
One canvas source, one shared CSS variable, and adaptive updates for backgrounds, text, borders, and overlays.
Compatible with React, Vue, Svelte, or Vanilla. It just sets a CSS variable you use anywhere.
ShareGradient generates a gradient once, injects it as a CSS variable, and lets you reuse that same visual layer across your interface. The result is a more consistent design system with less duplicated CSS.
Use the generated image anywhere `background` is accepted.
Switch the gradient shape without changing your integration pattern.
Dial the amount of movement to match the component or the page.
The public API stays intentionally small: build a controller, start it, then consume the CSS variable wherever you need it.
npm install sharegradient
The library is browser-focused and dependency-free at runtime.
import { createShareGradient } from "sharegradient"; const heroGradient = createShareGradient() .setColors([ "#7c3aed", "#ec4899", "#f59e0b" ]) .setCssVariable("--hero-gradient") .setAnimationMode("swirl") .setResolution(0.5) .build(); heroGradient.start();
The engine draws a gradient into a canvas and updates it at the rate you choose.
The canvas snapshot becomes a `url(...)` stored in your target CSS variable.
Backgrounds, text fills, borders, overlays, or animated offsets can all consume the same source.
Keep the same mental model while changing the gradient type or the animation behavior. This is where the library becomes useful beyond hero backgrounds.
createShareGradient() .setGradientType("linear") .setAnimationMode("swirl") .setCssVariable("--demo-linear")
createShareGradient() .setGradientType("radial") .setOrigin(0.35, 0.4) .setAnimationMode("static") .setCssVariable("--demo-radial")
createShareGradient() .setGradientType("conic") .setAnimationMode("rotate") .setRotationSpeed(0.04) .setCssVariable("--demo-conic")
The builder configures the output. The controller handles the lifecycle. Nothing more exotic than that.
| Method | Purpose |
|---|---|
setColors() |
Define gradient stops |
setCssVariable() |
Choose the injected CSS variable |
setGradientType() |
Switch between linear, radial, and conic |
setAnimationMode() |
Use static, swirl, or rotate motion |
setAngle() |
Set the angle for linear or conic rendering |
setOrigin() |
Move the radial or conic center point |
setFPS() |
Throttle updates with a familiar control |
setResolution() |
Trade image sharpness against render cost |
setQuality() |
Control output image compression quality |
start()
Initializes the engine, resizes the canvas, and begins the update loop.
pause()
Stops animation frames while keeping the last generated background in place.
resume()
Restarts a paused loop without rebuilding the full configuration.
once()
Renders a single frame for static pages or one-shot visual generation.
stop()
Stops the loop and clears the runtime listeners created by the controller.
const gradient = createShareGradient() .setColors(["#111827", "#6366f1"]) .setCssVariable("--panel-grad") .build(); gradient.start(); gradient.pause(); gradient.resume(); gradient.stop();
ShareGradient is most useful when you want a single visual thread running through the whole interface instead of isolated CSS effects.