Skip to content
tileio

Menu

12 layers · 4 free

Gradient hero backgrounds in WebGL

A hero gradient has a job besides looking good: it has to leave the headline readable. These twelve keep their contrast in broad, slow fields instead of busy detail, move on their own clock and lean toward the pointer without asking for attention.

Each is a single fragment shader of about 2 KB with five or six parameters and five palettes. Pick the palette in the studio, keep the speed low so the motion stays behind the words, and copy the prompt: it carries the shader and the canvas setup for your stack.

The 12 layers, in order

  1. Four slow bands of light on a near-black sky that lean toward the pointer; the dark ground keeps white type readable.

  2. Warm light scattering up from a sun just under the horizon into a deep sky; the pointer slides the sun along it.

  3. Ridges stepping paler into haze, backlit by a low sun that follows the pointer. A light palette for an editorial hero.

  4. Fog pooled between hill lines with rays breaking through, thinning around the pointer. Pale enough for dark text.

  5. Daylight through a sheer curtain, dim in the folds and bright where the fabric thins; the glow walks along the folds with the pointer.

  6. Parallel silk folds with a sharp sheen that glides along the ridges as the lamp follows the pointer. Suits fashion and beauty.

  7. Slow smoke lit from one side that parts around the pointer as if someone walked through it. Dark, with room for a headline.

  8. Two layers of space dust warping through each other over pinpoint stars; the pointer is a young star lighting the cloud.

  9. Velvet

    FREE

    N° 0116 · velvet pile

    Crushed velvet whose sheen rolls across the nap as the pointer moves. Deep and low in contrast, so type sits on it easily.

  10. A thin film of petrol cycling through the spectrum; rest the pointer and a drop spreads into rings. For a hero that wants colour.

  11. Soft lights whose red, green and blue fringes split away from the pointer and bloom to white where they overlap.

  12. Micro-prism foil throwing a rainbow that sweeps across the sheet as the pointer changes the angle. Bright, for product launches.

Browse the full catalogue: Gradients

Related collections

All collections