webdevpuneet.com

Related Snippets

175 in Animations category
52–57 of 60

WebGL Gradient Shader Background

Canvas Noise Texture Background

Canvas Mesh Gradient Background

Canvas Star Trail Cursor

Canvas Pixelate Image Reveal

Canvas Wave Background

WebGL Gradient Shader Background — Free Raw GLSL Animated Gradient

WebGL Gradient Shader Background · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsCanvasGlassmorphismAccessibility

Copy & paste

Source Code

<section class="wgs-wrap">
  <canvas class="wgs-canvas" id="wgsCanvas"></canvas>
  <div class="wgs-content">
    <span class="wgs-tag">raw webgl1 · fragment shader</span>
    <h1>Rendered on the GPU</h1>
    <p>A full-screen triangle and a hand-written GLSL fragment shader animate this gradient — no Three.js, no library.</p>
    <button class="wgs-btn">Explore the docs</button>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Raw WebGL1, no library
Hand-written shader compile/link boilerplate, no Three.js.
Single-triangle full-screen pass
One draw call, no shared-edge overdraw of a two-triangle quad.
Per-pixel GLSL gradient
Colors computed in the fragment shader, not the 2D canvas.
Live u_time and u_resolution
Both uniforms update every frame for smooth, responsive motion.
Explicit compile/link checks
Real GLSL compiler errors logged instead of silent failure.
DPR-aware viewport
Canvas backing store and gl.viewport track devicePixelRatio.
No-WebGL fallback
A static CSS gradient renders if the context can't be created.
Reduced-motion aware
One static frame renders instead of an animation loop.

About this UI Snippet

WebGL Gradient Shader Background — Raw GLSL, No Library

Screenshot of the WebGL Gradient Shader Background snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe gradient compiles and starts animating immediately on load.
  2. 2
    Resize the windowThe canvas and viewport rescale for devicePixelRatio.
  3. 3
    Open devtools consoleAny GLSL syntax error would log a real compiler message here.
  4. 4
    Enable reduced motionA single static frame renders instead of a perpetual loop.
  5. 5
    Edit the fragment shaderChange colorA/B/C or the wave frequencies for a new palette/pace.
  6. 6
    Test WebGL failureForce gl to null to see the plain-CSS gradient fallback.

Real-world uses

Common Use Cases

GPU-accelerated hero backgrounds
Render a smooth animated gradient per pixel in a fragment shader, as a lightweight alternative to a large 3D library.
Raw WebGL fundamentals
Learn the complete compile, link, bind and draw sequence in one file, using a single full-screen triangle that avoids overdraw along a shared edge.
Performance-sensitive pages
Cost far less than stacking blurred elements, since colours are computed on the GPU with u_time and u_resolution uniforms each frame.
Marketing site comparisons
Compare with a gradient mesh hero built in CSS to choose between GPU shaders and layered blurs for your brand.
Layer behind 3D scenes
Provide a cheap background beneath a Three.js particle wave, with a plain CSS fallback if WebGL is unavailable.

Got questions?

Frequently Asked Questions

The single triangle uses vertices positioned well outside the -1 to 1 clip-space range (at (-1,-1), (3,-1) and (-1,3)), so the GPU's clipping stage trims it down to exactly the viewport rectangle — visually identical to a quad. It requires only one draw call of three vertices and avoids the extra shared diagonal edge a two-triangle quad has to rasterize, which is a standard, low-cost optimization for full-screen shader passes.

u_resolution holds the canvas's current size in device pixels and is used to convert each pixel's gl_FragCoord into a normalized 0-1 UV coordinate (and to correct for aspect ratio so the pattern doesn't stretch). u_time holds the elapsed seconds since the page loaded and is what drives every sin/cos term in the fragment shader, so the gradient animates continuously — both uniforms are re-sent to the GPU every frame before the draw call.

WebGL does not throw JavaScript exceptions when a shader fails to compile or a program fails to link — it fails silently and the canvas just renders nothing (or garbage) with no error in the normal sense. Explicitly checking COMPILE_STATUS and LINK_STATUS and logging gl.getShaderInfoLog / gl.getProgramInfoLog is the only way to see the actual GLSL compiler error message, which is essential for debugging a shader that isn't rendering.

canvas.getContext('webgl') (with an 'experimental-webgl' fallback for older browsers) returns null if WebGL cannot be created. The code checks for that explicitly, hides the canvas, and applies a static CSS radial-gradient to the wrapper instead, so the section still looks like an intentional, finished background rather than an empty box.

Move the context creation, shader compilation, program linking, and buffer setup into a mount effect referencing the canvas via a ref, store the requestAnimationFrame id, and cancel it along with removing the resize listener in the cleanup function. Because WebGL resources (buffers, shaders, the program) are tied to the specific GL context, avoid recreating them on every re-render — set them up once and only update uniforms per frame.