Color Gradient Lab

by GameDev.net · GLSL ES 3.00 (WebGL2) · 25 Aug 2026

Run the shader to adjust these controls.

What it demonstrates

This project builds a directional two-color gradient from normalized coordinates. Two color pickers define the endpoints and a two-component control defines the gradient direction. It separates three reusable ideas: projecting a position onto an axis, shaping a zero-to-one blend factor, and interpolating colors.

Shader inputs

void mainImage(out vec4 fragColor, in vec2 fragCoord)

Called once per pixel. Write the colour to fragColor.

iResolution vec3: Viewport size in pixels (z is the pixel aspect ratio).
iTime float: Seconds since the shader started.
iTimeDelta float: Seconds since the previous frame.
iFrameRate float: Frames per second, smoothed.
iFrame int: Frames rendered since the start.
iMouse vec4: Mouse position: xy while held, zw of the last click.
iDate vec4: Year, month, day, and seconds within the day.
iChannel0 sampler2D: Texture bound to channel 0.
iChannel1 sampler2D: Texture bound to channel 1.
iChannel2 sampler2D: Texture bound to channel 2.
iChannel3 sampler2D: Texture bound to channel 3.
iChannelResolution vec3[4]: Pixel size of each bound channel texture.
iChannelTime float[4]: Playback time of each channel, in seconds.
iSampleRate float: Audio sample rate, always 44100.

Main Image5

1 uniform vec3 uColorA; // @param 0.0..1.0 = 0.08, 0.20, 0.55 color "Start color"

2 uniform vec3 uColorB; // @param 0.0..1.0 = 1.0, 0.42, 0.16 color "End color"

3 uniform vec2 uDirection; // @param -1.0..1.0 = 0.8, 0.35 "Gradient direction"

5 void mainImage(out vec4 fragColor, in vec2 fragCoord) {

6 vec2 uv = fragCoord / iResolution.xy;

7 vec2 direction = normalize(uDirection + vec2(0.0001));

8 float projection = dot(uv - 0.5, direction) + 0.5;

9 float shapedMix = smoothstep(0.0, 1.0, projection);

10 vec3 color = mix(uColorA, uColorB, shapedMix);

11 fragColor = vec4(color, 1.0);

12 }

Learn from this shader

How it works

After creating UV coordinates, the direction vector is normalized so its length does not alter the strength of the gradient. A tiny offset prevents the all-zero direction from becoming undefined. The dot product projects each centered UV position onto that direction, producing one scalar that varies along the selected axis. Adding one half places the useful range around zero to one. smoothstep gently shapes and clamps the projection before mix interpolates each RGB component between the start and end colors. Alpha stays fully opaque.

Try changing

Move the Direction components to compare horizontal, vertical, and diagonal ramps. Swap the endpoint colors or make them nearly equal to see how interpolation preserves hue differences. In a fork, replace smoothstep with clamp(projection, 0.0, 1.0), square the blend factor to bias it, or use 1.0 - shapedMix to reverse the ramp without swapping colors.

Using it in a game

Directional gradients are useful for sky backdrops, health bars, UI panels, fog coloration, and procedural material masks. In a mesh material, use appropriate object, world, or UV coordinates. Engine color spaces and alpha conventions vary, so verify whether interpolation occurs in linear or display color space.

Explore the techniques

Continue with curated explanations and progressively related examples.

2D & patternShapes, tiling, symmetry and colour worked out in the plane.

LicenseMIT

Views0

Forks0

Discussion

Loading comments...