A shader is a small program that runs on your graphics card (GPU). The most common kind — a fragment shader — answers exactly one question:
"What color should this pixel be?"
That's it. It gets the pixel's coordinates as input, does some math, and returns a color. No loops over the image, no memory of other pixels, no side effects. The magic is in the scale: the GPU runs this same function for every pixel at once, in parallel, across thousands of little cores.
The animation below is one such function. Drag the slider to change how many pixels it's asked to fill — the program never changes, only how many times it runs.
At full resolution that's over a million program runs per frame, sixty frames per second — around a hundred million tiny decisions a second, just for this small rectangle. This is why GPUs exist: they trade the CPU's cleverness for overwhelming parallelism.
GPUs draw everything — game worlds, browser pages, map tiles — out of triangles. Your program hands the GPU a pile of triangle corners (vertices), and the drawing happens in stages:
Runs once per corner. Decides where on screen each vertex lands.
Figures out which pixels each triangle covers. Built into the hardware.
Runs once per covered pixel. Decides what color it gets.
The colored pixels land in the framebuffer and get displayed.
Here's a real, live triangle. Each corner was given a color by the vertex stage, and the rasterizer smoothly interpolates those values across the surface before handing them to the fragment shader. Drag the corners and watch the interpolation follow.
Fragment shaders are written in GLSL, a small C-like language. Let's build one up. Click through the steps — the code on the right is exactly what's running on the left, and highlighted lines are what changed.
Notice what we never wrote: no loop over pixels, no "move right one pixel". Each run of the function only knows its own coordinate, the clock, and math. Complex motion emerges because a million independent answers happen to fit together — like a stadium crowd making a wave without any single person moving sideways.
The built-in input: "you are pixel (x, y)". The only thing that differs between the million runs.
A value that is the same for all pixels this frame — the time, the resolution, the mouse position. Set by the CPU, read by everyone.
A value the vertex shader outputs per-corner, which arrives at the fragment shader smoothly interpolated — like the triangle's colors above.
The output: a vec4 of red, green, blue, alpha — each from 0.0 to 1.0. The single answer each pixel gives.
This is a real shader editor. Edit the code and hit Run — it compiles on your GPU and replaces the animation instantly. Try the presets, then break things: change a number, swap sin for cos, multiply something by 10. Move your mouse over the canvas — it's a uniform too.
Every 3D game's lighting, water, and fire; the smooth zoom of a map app; video playback color conversion; CSS blurs and page compositing in your browser; the Netflix loading ripple — all fragment shaders. Machine learning even runs on the same silicon, because "do the same small math on a million things at once" turned out to be one of the most useful ideas in computing.
The hero animation at the top of this page? About twenty lines of GLSL, structurally identical to what you just wrote in the playground.
Want to go deeper? The Book of Shaders is a beautiful gentle course, and Shadertoy is an endless gallery of what these tiny programs can do — including entire animated worlds, in one function, with no geometry at all.
😢 Your browser doesn't seem to support WebGL, so the live demos on this page can't run. The text still works, but it's a lot less fun.