WebGL Gradient Shader Background — Free Raw GLSL Animated Gradient

Almost every WebGL background on the web goes through Three.js or a similar engine. This snippet is the layer beneath that: the minimal, correct boilerplate to compile a vertex and fragment shader, bind a full-screen triangle, and run an animated GLSL gradient directly against the raw WebGL1 API — useful both as a lightweight background effect and as a reference for what a library like Three.js is actually doing under the hood.

A triangle, not a quad

Most tutorials draw a full-screen effect with two triangles forming a quad. This snippet uses one triangle with vertices at (-1,-1), (3,-1), and (-1,3) — coordinates that extend well past the [-1, 1] clip-space boundary. The GPU clips the oversized triangle down to exactly the viewport rectangle, so the visible result is identical to a quad, but it's a single draw call of three vertices with no shared diagonal edge to rasterize twice. It's a standard low-level trick precisely because it's marginally cheaper with zero downside.

All the visuals live in the fragment shader

The vertex shader does almost nothing — it just passes each triangle vertex straight through to gl_Position. Every pixel of color comes from the fragment shader, which runs once per pixel and receives gl_FragCoord, the pixel's screen coordinate. Dividing that by a u_resolution uniform normalizes it to a 0-1 UV space, and remapping to -1..1 and correcting for aspect ratio (p.x *= u_resolution.x / u_resolution.y) keeps the pattern from stretching on non-square viewports.

A modest animated field, not full noise

Rather than a full simplex or Perlin noise implementation, the fragment shader combines a handful of offset sin/cos terms at different frequencies and phase speeds — driven by a single u_time uniform — and blends three colors with mix() based on those wave values. It's the GLSL equivalent of the layered-sine technique used elsewhere in this library (see aurora background), just running per-pixel on the GPU instead of per-shape on a 2D canvas.

Compiling and linking, explicitly

compileShader() creates a shader object, sets its source, compiles it, and checks gl.getShaderParameter(shader, gl.COMPILE_STATUS) — a step it's easy to skip and then debug blind when nothing renders. The two compiled shaders are attached to a program, linked, and checked again with gl.getProgramParameter(..., gl.LINK_STATUS). Both checks log the real GLSL compiler error to the console, which is the only way to actually debug a broken shader.

Uniforms updated every frame, and a real fallback

Each frame, u_time (elapsed seconds since start) and u_resolution (current canvas size in device pixels) are pushed to the GPU before gl.drawArrays. If canvas.getContext('webgl') returns null — WebGL disabled or unsupported — the canvas is hidden and a static CSS radial-gradient takes its place, so the section never renders blank. It also honors prefers-reduced-motion, rendering one pleasant static frame instead of animating. Pair it with gradient mesh hero for a comparison against a 2D-canvas approach to the same aesthetic, or with three particle wave to see the same GPU ideas through a library.