ShaderBattle

What is a fragment shader? A plain explanation with code

Updated 2026-10-08

A fragment shader (Unity and Unreal call it a pixel shader) is a small function that the graphics card runs once for every pixel it draws. It receives where that pixel is, and it returns what color the pixel should be. That is the entire idea.

The one-line mental model

Imagine a 400 × 300 picture. That is 120,000 pixels. A fragment shader is the code that decides the color of one of them. The GPU does not run it 120,000 times in a row like a loop. It runs it for all of them at the same time, on thousands of tiny cores. That is why shaders are fast, and also why they feel strange the first time: every pixel runs on its own, and none of them can see what the others are doing.

What a fragment shader looks like

Here is a complete shader in HLSL, the language Unity uses. It paints a smooth red gradient from the left of the screen to the right:

float4 frag(float2 uv)
{
    // uv goes from (0, 0) at the bottom left to (1, 1) at the top right
    return float4(uv.x, 0.0, 0.0, 1.0);   // red, green, blue, alpha
}

The input uv is the position of the current pixel, scaled so the screen goes from 0 to 1. The output is a color: four numbers for red, green, blue and alpha. Pixels on the left have uv.x close to 0, so they are dark; pixels on the right have uv.x close to 1, so they are bright red.

What a shader can know

  • Where the pixel is (uv, or screen coordinates).
  • What time it is, a number that grows every frame. Use it to animate: sin(time) goes up and down smoothly.
  • Values the program sends in, called uniforms: a color, a mouse position, a texture.

That is almost all. There is no memory between pixels and no memory between frames, which is why every effect you see in a shader is written as a function of position and time.

Where fragment shaders are used

Everywhere something is drawn: lighting and materials in game engines, water, fire and smoke, post-processing like bloom and color grading, the backgrounds of websites, and the creative-coding pictures on sites like Shadertoy. Games use them for every pixel of every frame.

Fragment, vertex and compute shaders

A vertex shader runs once per corner point (vertex) of a 3D model and decides where it appears on screen. A fragment shader then runs for every pixel the model covers. A compute shader is a general-purpose GPU program that does not draw anything by itself. When people say "shader" they most often mean the fragment shader, and that is the one to learn first.

Learn it by doing

Reading about shaders only goes so far; you need to change a number and watch every pixel react. In ShaderBattle every lesson shows a target picture and lets you write the shader that draws it, live in your browser. Start with the first lesson, Every pixel, one function, then learn about positions in UV: where am I? and animation in Time: make it move.

Keep reading

Start the interactive lessons