Grainient Shader Editor

Real-time shader gradient editor; customize and embed animated backgrounds

Tier A · StrongGeneratorShader PackToolshader.grainient.supply

Preview image from shader.grainient.supply

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License: Commercial license
Pricing: Freemium, One-time purchase, Subscription
Framework: Unknown
Styling: Shader / GLSL
Distribution: Web app / online tool, Direct download / asset pack
Platform: Web
Content type: Images / textures / backgrounds, Video, 3D assets and scenes
Agent readiness: Client-rendered shell
Accessibility: Unknown
Maturity: Actively maintained
Pricing detail: Lifetime access $299 (from $759); Pro $59/year or $13/month (from $149); commercial license included in both

Components it ships

Gradient Background

Helps you build

Homepage Features Splash Screen Pricing Website

Notable for

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

Provenance

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)

Also in Textures, Backgrounds & Assets

shader.grainient.supplyTier A