Understanding shaders: GLSL for designers

The first time I wrote a shader, it felt like painting with mathematics. No layers, no brush — just a tiny function that decides, for every single pixel, what color it should be. As a designer, that was an eye-opener, and that's exactly why I want to take the fear out of it for you.

Vertex and fragment: two stages, one stage

A shader program runs in two passes. The vertex shader handles positions — it moves the corner points of your geometry through space. The fragment shader runs afterward and decides, for each pixel on the surface, what color it carries.

For visual effects, the fragment shader is usually the exciting part. Think of it as a function that runs millions of times in parallel on the graphics card — once per pixel, all at the same time. That parallelism is exactly why shaders stay so smooth.

A shader doesn't think in shapes, it thinks in coordinates. You don't describe what gets drawn, but how color spreads across the surface.

Uniforms: the wire between world and GPU

Shaders live in isolation on the GPU. To let them know anything from the outside, there are uniforms — values you hand in from your JavaScript that stay the same for every pixel. Classics are time for animation, the mouse coordinates, or the resolution of the canvas.

uniform float time;
uniform vec2 resolution;

void main() {
  vec2 uv = gl_FragCoord.xy / resolution;
  float wave = sin(uv.x * 10.0 + time);
  gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);
}

Those few lines already produce a living gradient that moves over time. uv normalizes the pixel position into a range from 0 to 1 — the coordinate system you actually think in.

Why it's worth the effort

CSS and SVG carry you a long way, but eventually you hit a wall: organic gradients, fluid distortions, generative patterns that don't fit into any image file. Shaders run directly on the graphics card and compute effects in real time that would be too heavy and too rigid as a video or GIF.

For me, shaders are the tool that makes a website stop merely looking like something and start to breathe. You don't need to be a mathematician to begin — a little trigonometry, a lot of experimentation, and the willingness to think in coordinates instead of layers. Start small, change one number, watch what happens. That game is the whole point.