Shaders

Shaders

Live GLSL, gradients, and ready-made backgrounds.

Components · Free

bg.ibelick

Background snippets for Tailwind and CSS.

Asset libraries · Free

Book of Shapes

A gallery of generative SVG patterns you can customize and take.

Components · Free

Canvas UI

HTML-in-canvas components with realtime shaders over real UI.

Shaders · Free

fffuel

SVG generators: noise, gradients, grain, and more.

Shaders · Freemium

FragCoord

Community shader gallery with live embeds, writeups, and a free public set.

Design tools · Freemium

GetLayers

Cinematic templates, 3D scenes, and gradients you copy as one AI prompt.

Shaders · Free

GLSL Sandbox

Live fragment-shader playground and gallery.

Shaders · Free

GoToTheme

MIT CSS and Tailwind background patterns and gradients you copy into a project.

Components · Freemium

Libraries.dev

Five UI effect libraries — beam, orbs, metal, gooey, image — free on npm.

Shaders · Free

Liquid Glass

Realistic liquid-glass refraction on any HTML element via WebGL.

Shaders · Free

LUMEN

Zero-dep WebGL2 studio for looping shader art with PNG, GIF, and WebM export.

Shaders · Free

LUMEN

In-browser WebGL2 shader studio with looping export and no signup.

Shaders · Free

Mesh Gradient

Interactive mesh-gradient maker.

Shaders · Free

NEAT

Free WebGL 3D gradient backgrounds with presets and an npm export.

Shaders · Free

OpenShaders

Open-source home for shippable web shaders with live editor and install path.

Components · Free

Orbkit

WebGL shader orbs for React via shadcn registry, free for non-commercial.

Libraries · Free

p5.js

Creative-coding library for canvas, WebGL, and sound.

Shaders · Free

Paper Shaders

Ready-made shader backgrounds you can drop into a site.

Design tools · Freemium

Pryzm

Browser studio for grain, glass, and gradient backgrounds you export as live code.

Shaders · Free

Radiant

Production-ready open-source shaders and effects for the web — zero deps, MIT, drop-in HTML.

Shaders · Free

Radiant

MIT canvas and WebGL effects you drop in with zero dependencies.

Shaders · Free

Shader Park

Sculpt live shaders with a JS-like language.

Shaders · Free

ShaderGradient

3D shader gradient maker with export.

Shaders · Freemium

ShaderKit

Professional GLSL shader studio in the browser with free full editor and optional cloud renders.

Shaders · Freemium

ShaderKit

Browser GLSL studio with loop tools and export; editor free, cloud render paid.

Shaders · Freemium

ShaderKit

Browser GLSL studio with loop tools and export; editor free, cloud render paid.

Shaders · Freemium

ShaderLabs

Lightweight modular WebGL shader library for hero backgrounds, MIT, zero setup.

Shaders · Free

ShaderPad

Tiny ~6kb library that removes boilerplate for embedding fragment shaders on the web.

Shaders · Freemium

Visual design platform for production-ready WebGPU effects and shader components.

Shaders · Free

ShaderSpace

Free browser-based GLSL shader editor and WebGL playground with live examples.

Shaders · Free

ShaderSpace

Free in-browser GLSL editor with live WebGL preview, textures, and PNG export.

Shaders · Free

ShaderSpace

Free in-browser GLSL editor with live WebGL preview, textures, and PNG export.

Shaders · Free

ShaderSpace

Browser GLSL editor with live WebGL preview, examples, and no signup.

Shaders · Free

Shadertoy

Live GLSL community. Watch, fork, learn.

Shaders · Free

Slang Playground

Compile and run Slang shaders in the browser, locally, with no server upload.

Libraries · Free

Stipple GL

12KB WebGL2 particle field that morphs into any SVG, zero deps.

Shaders · Free

The Book of Shaders

Shader primer with live examples, by Patricio Gonzalez Vivo.

Libraries · Free

three-fluid-fx

Drop-in real-time fluid solver for three.js with GLSL and WebGPU TSL pipelines.

3D · Freemium

ThreeUI

Open-source catalog of procedural Three.js heroes, shaders, and 3D UI.

Motion · Free

TiXL

Free open-source realtime motion-graphics and VJ tool, formerly Tooll 4.

Color · Free

UI Gradients

Curated CSS gradients.

Shaders · Freemium

Unicorn Studio

No-code WebGL effects you embed on a site.

Shaders · Free

vgpu.sh

Shareable WGSL modules with dependency resolution.

Shaders · Free

vshaders

Pick a shader, tweak it, let an agent copy the files — like shadcn for WGSL.