Radiant Shader Gallery

Index730 resources

Browsable gallery of 87 free WebGL and Canvas 2D background effects

Tier A · StrongGalleryShader PackAsset Packradiant-shaders.com

(Visit radiant-shaders.com ↗)(Docs)(Repository)

This is the full browse view for Radiant, Paul Bakaus's MIT-licensed collection of generative shader art. It lists 87 named effects with live previews, filterable by style tag (fill, geometric, noise, object, organic, particles, physics) and by technique (WebGL, 60 / Canvas 2D, 27). Each entry links to a detail page with the effect running full-bleed and its tunable parameters, and a companion /learn section explains how three of them are built. Every effect ships as a single self-contained HTML file with zero dependencies and no build step.

For an agent

Use this page to pick an effect by eye, then take the matching HTML file from the GitHub repo - the site itself has no copy button or package. Embed the file in a fixed, z-index -1 iframe behind your content and drive parameters with postMessage; that isolation is the point, because it keeps the shader off your React render path entirely. Two cautions: these are decorative full-canvas animations with real GPU cost, so gate them behind prefers-reduced-motion and do not stack two on one page, and the gallery lists 87 effects while the repo README badge still says 94.

Why it is here. It is the rare shader collection that is both curated for taste and genuinely drop-in, which makes it the fastest route from a flat hero to a distinctive one without adding a 3D dependency.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: Vanilla JS, Svelte
Styling: Shader / GLSL, Vanilla CSS
Distribution: Browse-only gallery or archive, Direct download / asset pack, GitHub repository, Copy-paste snippet
Platform: Web
Content type: Code
Agent readiness: Copy-paste ready code, Readable open source
Accessibility: Known accessibility gaps
Maturity: Actively maintained
GitHub stars: 927

Components it ships

Gradient Background Particle Background Animation

Helps you build

Homepage Splash Screen Features

Templates

Notable for

87 effects with live previews
filter by style tag and by technique
60 WebGL, 27 Canvas 2D
effects named after their inspiration
/learn walkthroughs for three shaders

Provenance

Verified 2026-08-15. HTTP 200. https://radiant-shaders.com/gallery/all (fetched and link-extracted: 87 unique /shader/ URLs), https://github.com/pbakaus/radiant, GitHub API repos/pbakaus/radiant

Also in Textures, Backgrounds & Assets

radiant-shaders.comTier A