Skip to content
tileio

Menu

12 layers · 3 free

Shader backgrounds: WebGL fragment shaders for the web

A shader background is one fragment shader drawn across a full-screen quad: every pixel computed on the GPU each frame, with no images to load. That makes it tiny (about a kilobyte of code) and sharp at any size, and it can react to the pointer for free.

These twelve are the pattern-makers of the catalogue: a reaction-diffusion field that draws its own stripes and spots, a kaleidoscope, a lava lamp, forked lightning that strikes where you point, a false-colour thermal image, an eclipse corona, two line gratings that make moiré, an x-ray plate with a scan line, fibre optics, stained glass lit from behind and a two-ink risograph print.

Each one ships as a self-contained canvas with the shader inline and named uniforms. Tune speed, scale and colour in the browser, then copy a prompt for single HTML or a Next.js, React, Vue, Astro, WordPress, Shopify or Webflow version. Thermal Map, Corona and Heat Shimmer are free.

The 12 layers, in order

  1. Turing: animated turing pattern gradient background preview

    Turing

    PRO

    N° 0251 · turing pattern

    A reaction-diffusion pattern: labyrinthine bands that creep and reconnect on their own.

  2. A drifting colour field folded into mirrored wedges, glass chips catching light at the seams.

  3. Wax blobs that warm at the base, lift, stretch, pinch off and sink in their own slow time.

  4. Forked bolts across a storm sky, striking wherever the pointer is.

  5. A false-colour heat image with warm bodies drifting through cool noise, stepped into iso-bands.

  6. A total eclipse: the corona streams out in combed plumes that flicker and lengthen.

  7. Two fine line gratings, one turning under the pointer, so the eye sees moving moiré.

  8. Air rising off hot ground: the horizon, the sun and the road wobble in columns of heat.

  9. X-Ray: animated gradient background preview

    X-Ray

    PRO

    N° 0122 · x-ray

    Translucent structures on a dark plate, denser where they overlap, a scan line sweeping down.

  10. A fan of hair-thin strands with pulses of light racing along them to sparkling tips.

  11. Leaded panes in a crooked lattice, each streaked with colour and lit from behind.

  12. Two grainy dithered inks overprinting on paper as their gradients drift.

Browse the full catalogue: Gradients

Questions

What is a shader background?

A background drawn by a GPU program (a GLSL fragment shader) rather than an image or video. The shader computes each pixel's colour every frame from time, position and inputs like the pointer, so it animates smoothly at any resolution.

Do I need three.js for a shader background?

No. These run on raw WebGL with one canvas and a few lines of setup, which is why each is around a kilobyte. Use three.js when you need real 3D geometry; see the three.js backgrounds collection.

Can I use a shader background in React?

Yes. Pick React or Next.js and the prompt asks for a component that mounts the canvas in a ref, runs the shader in useEffect and tears down the WebGL context on unmount, with the settings as props.

Are they free?

Thermal Map, Corona and Heat Shimmer are free. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections