Skip to content
tileio

Menu

12 layers · 2 free

Animated gradient backgrounds that drift on their own

These are soft colour blends that keep moving: gradients that read as calm behind text, but never sit completely still. Each one borrows its motion from something real, so the drift feels natural rather than a looped hue shift: light through deep water, a candle flame breathing, watercolour blooming on paper, cumulus crossing the sky, the colour play inside a shell or an opal.

They are WebGL fragment shaders of about a kilobyte, which makes them lighter than a video and sharper than a looping GIF. The pointer adds a light or a bloom, but the gradient animates without it, so it works on phones too.

Pick a palette or set your own five colours, adjust speed and scale, then copy the prompt for a self-contained canvas in single HTML or a framework component. Cloud Bank and Bokeh Field are free.

The 12 layers, in order

  1. A soft blush from one colour to another under fine down that catches the light.

  2. Cumulus crossing the sky, the edges facing the sun glowing where the pointer is.

  3. Dark water lit by swaying shafts of light, plankton drifting through the beams.

  4. One candle flame breathing and leaning, its light falling off across a textured wall.

  5. Dye bands spiralling out from a pinch, pale fold lines radiating between them.

  6. Wet-on-wet pigment blooming across paper, each bloom drying darker at its rim.

  7. Nacre: animated mother of pearl gradient background preview

    Nacre

    PRO

    N° 0102 · mother of pearl

    The inside of a shell: soft contour bands sliding from pink to green to blue.

  8. Opal: animated gradient background preview

    Opal

    PRO

    N° 0243 · opal

    A milky body split into soft cells, each throwing a different colour as the light moves.

  9. Feather barbs fanning up from the bottom edge, the colour shifting with the angle.

  10. A winter sky with thin cirrus and the ring ice crystals draw around a low sun.

  11. City lights through a wide-open lens: discs at three depths drifting slowly.

  12. Ink floated on water: concentric rings from four drops, combed into waves.

Browse the full catalogue: Gradients

Questions

How do I make an animated gradient background?

The light way is CSS (animated background-position or layered conic gradients), which suits simple two-colour drifts. For richer blends like these, a small WebGL shader on a canvas behind your content computes the gradient each frame. The prompt gives your AI tool the shader and the mounting rules.

Is a WebGL gradient heavier than a CSS one?

Barely in download size (about a kilobyte of shader code) but it uses the GPU each frame. The shaders here respect reduced motion. For pure CSS loops, see the CSS animated backgrounds collection.

Can I use my brand colours?

Yes. Every gradient takes five colours; pick one of its palettes or set your own in the browser, and the prompt carries those exact values.

Are they free?

Cloud Bank and Bokeh Field are free. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections