Shader libraries for the web in 2026, and how to pick one

If you want a moving gradient, a grain texture or a liquid-metal logo on a website, you no longer have to write a shader from scratch. You do have to pick a library, and the popular options solve very different problems.

The short version:

• A ready-made effect in a React or plain JS site: use Paper Shaders.
• A 3D scene, or effects that need to run on WebGPU with a WebGL fallback: use Three.js with WebGPURenderer and TSL.
• Your own GLSL with as little library as possible: use OGL.
• Proven shader functions (noise, colour, SDFs) to include in your own shaders: use LYGIA, after checking its licence.

The rest of this guide explains where each one fits, what it costs you, and the mistakes that are easy to make.

Start with what you are building

Most comparisons line these libraries up as if they compete. They mostly don't. They sit at different levels:

1. Finished effects you configure with props (Paper Shaders).
2. A full renderer that manages scenes, materials and the GPU for you (Three.js).
3. A thin wrapper over WebGL that leaves the shader to you (OGL).
4. A function library you pull into shaders you write (LYGIA).

So the first question isn't "which is best". It's "how much of the shader do I want to own?"

Paper Shaders: effects without writing GLSL

Paper Shaders is a set of canvas shaders from the team behind the Paper design tool. The library is published as @paper-design/shaders for vanilla JS and @paper-design/shaders-react for React, with no dependencies. The catalogue includes mesh gradients, grain gradients, dithering, halftone, fluted glass, liquid metal, god rays, metaballs and more; the full list is on the site.

The workflow suits designers well: tune an effect on its page until it looks right, then copy the component with those settings.

import { MeshGradient } from "@paper-design/shaders-react";

<MeshGradient
  colors={["#5100ff", "#00ff80", "#ffcc00", "#ea00ff"]}
  distortion={1}
  swirl={0.8}
  speed={0.2}
  style={{ width: 200, height: 200 }}
/>

Watch out for: versioning. The README says breaking changes ship under 0.0.x versions and asks you to pin the dependency. Use an exact version in package.json, not a ^ range, or an unrelated install can change how your hero looks.

Skip it when: the effect you need isn't in the catalogue, or it has to react to a 3D scene.

Three.js with WebGPURenderer and TSL: the long-term bet for 3D

Three.js now has two renderers. WebGPURenderer uses WebGPU when the browser supports it and falls back to a WebGL 2 backend when it doesn't. Its shaders are written in TSL, the Three.js Shading Language: you write shader logic in JavaScript, and Three.js turns it into WGSL for WebGPU or GLSL for WebGL.

That fallback matters. WebGPU now ships in Chrome, Edge, Firefox and Safari, but not on every platform, so writing once and running on both backends is the practical way to adopt it.

Three things the migration guide in the Three.js manual makes clear:

• The import changes from three to three/webgpu.
• WebGPU starts up asynchronously, so call await renderer.init() (or use setAnimationLoop) before rendering.
• Custom ShaderMaterial, RawShaderMaterial and onBeforeCompile() tweaks don't work in WebGPURenderer. They have to be ported to node materials and TSL.

The manual also says WebGLRenderer is still maintained and recommended for pure WebGL 2 apps, but there are no plans for larger new features. So new projects should lean towards WebGPURenderer. An existing site full of custom GLSL materials should budget real time for the port.

Skip it when: all you need is a flat 2D background. Loading a 3D engine for a gradient is a lot of JavaScript for very little.

OGL: when you want to write the shader yourself

OGL is a small WebGL library that, in its own words, "does the minimum abstraction necessary". Its README puts the whole thing at roughly 29 kB minzipped (core, math and extras), and tree-shaking usually brings it lower. It's released under the Unlicense, which is effectively public domain.

OGL handles the tedious parts (programs, geometry, render targets) and leaves the GLSL to you. That makes it a good fit for a single custom effect, like a distortion on image hover, where Three.js would be overkill and raw WebGL would be a lot of boilerplate.

Skip it when: you want WebGPU. OGL targets WebGL.

LYGIA: building blocks, with a licence to read first

LYGIA is a large collection of reusable shader functions (noise, colour spaces, lighting, signed distance functions and so on) available for GLSL, HLSL, Metal, WGSL and CUDA. You #include the functions you need, either from a local copy or through LYGIA's online resolver.

It isn't a renderer. Pair it with OGL, raw WebGL, or anything else that runs your shaders.

Read the licence before shipping client work. LYGIA is dual-licensed: the Prosperity License, which has non-commercial restrictions, and the Patron License for sponsors and contributors, which removes them. A commercial licence is also offered. If a paying client's site uses LYGIA functions, sort out the licence first; this is the mistake most likely to cause trouble later.

Common mistakes

• Animating forever with no off switch. Shader backgrounds run on every frame. Pause them when they scroll off screen, and slow or stop them for people who ask for less motion. There's more on that in designing motion for reduced-motion users.
• Unpinned early-stage packages. Any 0.0.x library can change its output between installs.
• Picking a renderer for one effect. Match the tool to the level you need, using the table above.
• Assuming WebGPU everywhere. Keep a WebGL path, or a static image, for browsers and devices without it.

Sources

• Paper Shaders on GitHub and shaders.paper.design
• Three.js WebGPURenderer docs and the Three.js Shading Language wiki
• OGL on GitHub
• LYGIA on GitHub
• WebGPU implementation status (gpuweb wiki)