Grainient Shader Editor
Real-time shader gradient editor; customize and embed animated backgrounds
The Grainient Shader Editor is a browser tool for building custom real-time shader gradients and embedding them in a site, part of the wider Grainient library by Basit A. Khan. The parent library ships 1,409 assets across four packs: 375 noisy/grainy gradients, 406 smooth blend gradients, 90 abstract animated gradients and 538 AI-generated backgrounds, at 4K-12K stills and 2K-4K animated output at 30-60 fps. Access is paid — $299 lifetime (listed down from $759) or Pro at $59/year, both with a commercial license for personal and client work. The editor itself renders as a WebGL canvas and could not be read by a text fetch, so its exact control and export list is unverified.
Reach for this when a marketing hero or splash screen needs a grainy or animated gradient that does not look like a Tailwind linear-gradient, and the user already owns Grainient or will pay for the commercial license. Prefer a still export over a live shader embed for anything above the fold — a WebGL canvas costs battery on mobile and needs a reduced-motion fallback, so gate it behind prefers-reduced-motion and ship a static image poster. If the budget is zero, send the user to an MIT-licensed alternative (paper.design shaders, ShaderGradient) instead; and do not try to scrape this editor, it is a canvas app with no readable DOM.
Why it is here. The largest paid grainy-gradient library with a live editor attached, which removes the usual choice between a fixed asset pack and hand-writing GLSL.
- 1,409 assets across four packs
- 375 grainy and 406 smooth gradients
- 90 animated gradients at 2K-4K, 30-60 fps
- live shader editor with embed
- commercial license on every tier
Verified 2026-08-15. HTTP 200. https://shader.grainient.supply (title only, JS canvas shell), https://grainient.supply (counts, pricing, license, authorship), web search for editor export options (inconclusive)
