Question 1

What is WebGPU, and which browsers run them?

Accepted Answer

WebGPU is the browser's interface to the graphics card, the successor to WebGL, and its shaders are written in WGSL. It ships in Chrome and Edge (on desktop, and on Android 12 and later), in Safari 26 and later on macOS and iOS, and in Firefox on Windows and macOS. Elsewhere, and until the first frame, each shader shows a CSS gradient in its own colors, so the section never goes blank and the layout never jumps.

Question 2

Will they slow my page down?

Accepted Answer

A shader draws only while it's on screen, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu, the library they run on (about 50 KB gzipped), loads when the first one mounts, not with the page. Most take under 1.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop, the heaviest about 3.5 ms; slower GPUs take several times longer, and `quality={0.5}` draws a quarter of the pixels. Each page gives its own figure. Under reduced motion, a shader draws one still frame and stops.

Question 3

Can I change their colors?

Accepted Answer

Nine in ten take color props (`backgroundColor`, `glowColor`, `inkColor`…) that accept any CSS color, `var(--primary)` and `oklch()` included, and follow a theme switch. The ten whose palette is the effect (Aurora, Plasma, Noise) keep it, most with a hue, saturation or palette prop to shift it. Each shader's page lists its props, and its demos show them.

Question 4

Can I write my own shader?

Accepted Answer

Yes, with Shader Canvas, the free component every shader here is built on. Give it a WGSL fragment shader: it fills your uniforms and colors by name, and brings the shared device, the pause off screen, reduced motion and the CSS fallback. A GLSL or Shadertoy shader translates line by line (`vec3` becomes `vec3f`, `iTime` becomes `u.time`), and its page shows how.

Question 5

Which frameworks do they work with?

Accepted Answer

React, Vue, Svelte and Solid, with the same props on each. A shader uses no UI library, so its one React version works beside Base UI, Radix UI, React Aria or Ark UI. Pick the framework at the top of a shader's page: the demos, the code and the install command follow it.

Question 6

Who made them, and how are they licensed?

Accepted Answer

Of the 100, 19 are ported from shadcn.io: its own shaders, and a few built on Shadertoy code released under CC0, MIT or CC BY-SA. 36 are rebuilt from scratch, most after Shadertoy classics by Shane, Xor and others: new code, written from the idea and never from theirs, with the original linked and credited on the page. The other 45 are new designs. Smooth Noise Contours keeps its original's CC BY-SA 4.0 license, which asks you to credit it and to share your changes to it under the same license.

Question 7

How do I install a shader?

Accepted Answer

Signed in, copy the shader's command: `npx shadcn@latest add` with its URL (`shadcn-vue` and `shadcn-svelte` for those ports). It adds the shader, the Shader Canvas it runs on and the vgpu package, and nothing to your stylesheet. With Pro, the MCP server does it from a prompt: describe the effect (a slow aurora behind a hero, a tunnel for a launch page) and your AI agent picks the shader and installs it on your stack.

Question 8

Are they free?

Accepted Answer

19 are free, and so is Shader Canvas: the ones marked with a gift take a free account to see the code and install them. The rest, marked with a crown, are part of Pro, which unlocks every shader's code and one-line install, and the MCP. Every demo is free to try here, and anything you install is yours to use in personal and commercial projects.

Shaders that glow.

Aurora Shader

Glitch Shader

Gradient Mesh Shader

Hologram Shader

Matrix Shader

Nebula Shader

Noise Shader

Plasma Shader

Ripple Shader

Waves Shader

Abstract Mod Shader

Accretion Shader

Advanced Tunnel Shader

Agate Geode Shader

ASCII Sculpture Shader

Aurora 3D Shader

Every shader, one prompt away, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every shader. One prompt away.