Best free WebGL background libraries in 2026

Short answer

If you only need a background, the lightest option is a single-file shader: the 87 effects here have a median gzipped size of 5.2 KB and no dependencies. If you need real 3D geometry, a camera and post-processing, three.js is the answer at about 178 KB gzipped. Between those two, particles, 2D scenes and hand-written GLSL each have a better-fitting tool, and the table below says which. All six options are free and permissively licensed.

Comparison

Library	Gzipped	Licence	Last commit	Deps	Best for
TappyPrism	5.2 KB median, 11.8 KB max	MIT	site, updated 2026-09-08	0	Copy-paste backgrounds, one file each
three.js	178 KB	MIT	2026-09-07	0	Real 3D scenes, cameras, post-processing
Vanta.js	3 KB plus three.js	MIT	2024-03-03	needs three.js or p5.js	One-line 3D-looking backgrounds
tsParticles	37 KB	MIT	2026-09-02	14	Interactive particles, confetti, hover links
PixiJS	252 KB	MIT	2026-09-07	10	2D games and heavy sprite scenes
OGL	33 KB	Unlicense	2025-04-13	0	Writing your own shaders with less boilerplate

Measured 8 September 2026. Sizes are gzipped, last-commit dates are from the GitHub API.

What each one is actually good at

three.js

The default for a reason. Around 115,000 GitHub stars, committed to the day before this page was written, and it is the only option here that gives you real geometry, a camera, materials and a post-processing pipeline. The cost is weight: roughly 178 KB gzipped for the full build, which is a lot to spend on a gradient that moves. Tree-shaking helps, but if the page never shows a 3D object, you are paying for a scene graph you do not use.

Vanta.js

The fastest way to a 3D-looking background: one script tag, one function call, done. Two things to know before you ship it. It renders through three.js or p5.js, so the 3 KB package is not the real cost, the renderer is. And the public repository's last commit was in March 2024, so treat it as finished rather than maintained. Fine for a landing page today, a risk for a product you will still be running in three years.

tsParticles

The most capable particle system on this list by a wide margin, and actively maintained: click bursts, hover connections, confetti, text-shaped emitters, per-particle physics. It is also 37 KB gzipped with 14 dependencies and it does particles specifically. If you want flowing light, fluids or a full-screen gradient, this is not the tool, and you would be carrying the weight for nothing.

PixiJS

A genuinely fast 2D rendering engine, which is why it is the right call for games, editors and scenes with thousands of sprites. At 252 KB gzipped it is the heaviest option here, and none of what you pay for, batching, asset loading, display objects, matters for a decorative background. Pick it when the background is the product.

OGL

A thin WebGL wrapper that stays out of your way: 33 KB gzipped, zero dependencies, released into the public domain under the Unlicense. It handles buffers, uniforms and math so you can write raw GLSL without boilerplate. The trade-off is that you still write every effect yourself. That is the exact gap TappyPrism fills: 87 effects already written, each readable in one sitting.

TappyPrism

One HTML file per effect, no dependencies, median 5.2 KB gzipped, MIT. You can copy the source into a page, embed it as an iframe, or paste it into an AI coding tool and ask for changes in plain language. Being honest about what it is not: this is a collection, not a library. There is no npm package, no TypeScript types, no scene graph, no way to compose two effects into one scene, and deep customisation means editing GLSL. If any of those are requirements, use one of the options above.

When TappyPrism is the wrong choice

• You need real 3D: geometry you can move a camera around, lighting, shadows, post-processing. Use three.js.
• The effect has to react to the DOM: click to burst, hover to connect, text shaped out of particles. Use tsParticles.
• You need a versioned npm dependency with TypeScript types and framework bindings. This is a folder of HTML files.
• You want to compose several effects into one scene with shared state. Each file here is deliberately standalone.

How we measured this

• Gzipped sizes come from Bundlephobia for the latest npm version on 8 September 2026: three 0.185.1, Vanta 0.5.24, tsParticles 4.4.0, PixiJS 8.20.1, OGL 1.0.11.
• Last-commit dates come from the GitHub API on the same day. Vanta renders through three.js or p5.js, so its 3 KB package is not the real cost.
• TappyPrism sizes were measured locally: 87 standalone HTML files gzipped at level 9, median 5.2 KB, largest 11.8 KB, no dependencies.
• Licences were read from each project's npm metadata rather than from memory. OGL is Unlicense, not MIT.

Frequently asked questions

What is the lightest way to add a WebGL background to a page?

A single-file shader. The 87 effects at TappyPrism have a median size of 5.2 KB gzipped and a maximum of 11.8 KB, with no dependencies, against 178 KB gzipped for a full three.js build. If all you need is motion behind your content, the difference is roughly 170 KB of JavaScript per page load.

Is Vanta.js still maintained in 2026?

Not really. The public repository's last commit was in March 2024, so it has been static for over two years as of September 2026. It is MIT licensed and still works, and it is a reasonable choice for a short-lived landing page, but do not build a long-term product on a dependency nobody is updating. It also requires three.js or p5.js to render.

Do I need three.js to run a shader background?

No. A fragment shader background is one quad and one shader program, which is a few dozen lines of raw WebGL and needs no 3D engine. three.js earns its weight when you want actual 3D: geometry, cameras, lights, materials, post-processing. OGL is the middle option if you want the boilerplate handled without the scene graph.

Are these libraries free for commercial use?

Yes, all six. three.js, Vanta.js, tsParticles, PixiJS and TappyPrism are MIT licensed, and OGL is released under the Unlicense, which is public domain. MIT means you can use them in commercial work without payment or permission, as long as you keep the licence notice with the source when you redistribute it.

Which option performs best on mobile?

It depends on whether the work lands on the GPU or the CPU. A single fragment shader runs per pixel on the GPU and is usually cheaper than any CPU particle system, but a shader that steps each ray dozens of times will warm a phone. Whatever you pick, cap devicePixelRatio at 2, pause the animation when it scrolls off screen, and honour prefers-reduced-motion. Every effect here already does all three.

Can I use these effects in React or Next.js?

The npm libraries have framework bindings. TappyPrism does not ship a package, so you either drop the effect source into a component's useEffect, or point an iframe at the file and tune it with postMessage. The iframe route is the one people usually take in Next.js because it keeps the animation out of the render tree.