ittybitty

60 production-ready WebGL shaders in plain JavaScript and GLSL. They stop when nobody can see them, respect reduced motion, and come as source you copy and own.

Browse the libraryOpen this background in the Studio
  • 60 shaders
  • 3.5 KB to 10.9 KB each
  • 0 dependencies

  • Swoosh

    Satin ribbons of light sweeping through the dark, finished with film grain.

  • Edge Glow

    Flowing colour that hugs the edges, like an assistant listening.

  • Drop Ripple

    A shockwave of light through any image, or the layers beneath.

  • Decode

    Any image, or the layers beneath, resolving from big squares into focus.

  • Rainbow

    A crown of spectral light that dissolves into the page.

  • Mesh gradient

    Four colours folding into one another, finished with fine grain.

  • Ocean

    Open sea to the horizon, with a path of sun across the swell.

  • Lagoon

    Painted water, from above or out to the horizon.

  • Liquid Metal

    Molten chrome folding slowly under studio softboxes.

  • Lake

    A still lake mirroring the sky and a far line of trees.

  • Pool

    Clear water from above, with refraction, caustics and sun glints.

  • Water Surface

    Open water from above, mirroring the sky or your image, rippled by wind and rain.

  • Rain

    Rain on a pane of glass: beads, running drops and streaks, in water, blood, mud or any colour.

  • Clouds

    A sky of real clouds, lit by the sun, with silver linings and warm sunsets.

  • Bubbly Clouds

    Puffy cartoon clouds in a bright blue sky, drifting past, receding, or flying through.

  • Aurora

    The northern lights folding over a starry sky, green below and violet above.

  • Sakura

    Cherry blossom petals drifting through the air in depth, tumbling and catching the light.

  • Fire

    Flames from a campfire, a torch or a wall of fire, realistic or cel-shaded.

  • Dissolve

    An image or element smouldering in spots or burning away behind a glowing ember edge.

  • Koi Pond

    Koi gliding through a pond from above, slipping under lily pads and darting from the pointer.

  • Sumi-e Mountains

    Mountains in ink wash: ridge behind ridge, fading into mist.

  • Wagara

    Traditional Japanese patterns, crisp at any size, with light travelling across them.

  • Tall Grass

    A meadow of tall grass with the wind rolling through it, realistic, cartoon or pixel.

  • Stained Glass

    Turns any image into a stained-glass window of rich panes and dark lead.

  • Black Hole

    A black hole bending light around it, its glowing disc lensed over the top of its shadow.

  • Force Field

    A hexagonal energy shield that lights up where you touch it and ripples when clicked.

  • Hologram

    Any image as a flickering projection: glowing edges, scanlines and a glitching signal.

  • Condensation

    Misted glass over any image: draw on it to wipe it clear, and watch the mist creep back.

  • Watercolour

    Turns any image, or the layers beneath, into a watercolour painting on textured paper.

  • Toon Ink

    Turns any image, or the layers beneath, into a comic panel with ink outlines and flat tones.

  • Crosshatch

    Pen-and-ink crosshatching of any image, or the layers beneath.

  • Graphite

    A pencil sketch of any image, or the layers beneath.

  • Engraving

    Any image, or the layers beneath, engraved like a banknote.

  • Paper

    A real sheet of paper: folded, crumpled, aged, with the print bending along with it.

  • Page Curl

    The page peels back from a corner, following the pointer.

  • Torn Paper

    Any image, or the layers beneath, torn open along a ragged edge.

  • Papercut

    A layered cut-paper scene with real shadows and parallax.

  • CRT

    Plays any image, or the layers beneath, on a curved tube monitor or a worn videotape.

  • Orb

    The glowing, breathing sphere of voice and AI interfaces.

  • Liquid Glass

    A slab of refractive glass that bends the image beneath it.

  • Dither

    Liquid shapes through a strict palette, in crisp ordered dither.

  • Dither Image

    Any image, redrawn in a few tones of ordered dither.

  • Silk

    Heavy satin folding slowly, a long sheen running down each fold.

  • Slats

    Light falling across long diagonal slats, fading into grain at their ends.

  • Rays

    Soft shafts of light from a single source, like sun through a high window.

  • Metaballs

    Gooey blobs that drift, merge and pinch apart.

  • Iridescence

    Oil-slick and holographic foil colours that shift as you move.

  • Dot Field

    A calm grid of dots that swells and brightens around the pointer.

  • Warp Tunnel

    Streaks of light rushing out of a vanishing point.

  • Ink

    Ink pouring from the pointer and curling away like smoke in water.

  • Fluted Glass

    Reeded glass over an image, each rib its own little lens.

  • Electric Border

    Living energy crackling around a card's edge.

  • Halftone

    An image as print: one ink of dots, or four rotated CMYK screens.

  • Topography

    Contour lines of a slowly shifting landscape.

  • Heatmap

    A word or a photo seen through a thermal camera, radiating and shimmering.

  • Gradient Map

    Recolour an image, or any layer stack, through your gradient.

  • Glow

    Two soft lights drifting behind cards, product shots and pricing tables.

  • Dither Light

    A 1-bit torch that follows your pointer across a dark surface.

  • Dither Haze

    A drifting haze of dithered ink for plain page backgrounds.

  • Grain

    Static film grain that adds tooth to flat fills and hides gradient banding.