InstantGradientControls
The mesh gradient generator.
InstantGradient is a free, browser-based tool for creating and exporting mesh gradients — no sign-up required. Generate a harmonious colour palette, render it as an animated WebGL shader, and ship the result as an image, a video, or code.
- 01Generate a palettePress the spacebar or click Generate. Colour-theory rules build a harmonious palette automatically — 2 to 8 colours (up to 5 on Free, up to 8 on Pro).
- 02Pick a styleChoose one of seven shader styles: flow, beam, mesh, liquid, wave, silk, or stripe. Each renders your palette as a live, animated WebGL gradient.
- 03Tune the lookAdjust distortion, swirl, scale, speed and grain with sliders that update in real time. Lock the colours you like and regenerate the rest.
- 04Export anywhereDownload a 4K PNG or WebP image, an MP4 video, or copy the gradient as React, CSS, Tailwind, JSON, or a JS shader. Pro also exposes a REST API.
- flow
- curl-noise swirls carrying the full palette — our in-house default
- beam
- one luminous beam of light on a near-black frame
- mesh
- soft multi-point colour blend — the classic mesh gradient
- liquid
- warped, swirling flow with organic distortion
- wave
- smooth rolling bands of colour
- silk
- fine directional sheen, like brushed silk
- stripe
- clean linear colour bands
Flow and Beam are our in-house InstantShader shaders. Mesh, liquid and wave render with @paper-design/shaders (MIT); silk and stripe with gradflow (MIT). Palette generation, curation, and the export pipeline are ours.
A mesh gradient blends multiple colours across a 2D surface with organic, irregular transitions, unlike a linear or radial CSS gradient that only flows in a straight or circular line. Designers reach for mesh gradients when they want depth, texture, and a watercolour-like blend that plain CSS can't produce.
InstantGradient renders every gradient as a live WebGL shader, so it animates smoothly, scales up to 4K without banding, and exports to whatever format your project needs.
- Images
- PNG & WebP · up to 4K · custom dimensions to 8192px
- Video
- MP4 (H.264) · custom duration · up to 4K
- Code
- React · CSS · Tailwind v4 · JSON · JS shader
- API
- REST endpoints · 500 requests / day (Pro)
| Feature | Free | Pro |
|---|---|---|
| Unlimited palette generation | ||
| All seven shader styles | ||
| Animated WebGL preview | ||
| Colours per palette | Up to 5 | Up to 8 |
| Saved palettes | 5 | Unlimited |
| Image export | 1× PNG | 4K PNG + WebP |
| Custom export dimensions | ||
| MP4 video export | ||
| Code export | CSS, Tailwind | + React, JS shaders |
| Visual effects (fluted glass, dithering, halftone, CMYK halftone) | ||
| REST API access | 500 / day |
Pro = $29 lifetime. One-time, no auto-renewal.
Is InstantGradient free?
Yes. The generator is free and needs no account. Free includes unlimited palette generation, all seven shader styles, animated previews, 5 saved palettes, and 1× PNG export. Pro unlocks 4K PNG and WebP images, MP4 video, code and REST API export, fluted glass, dithering, halftone, and CMYK halftone effects, up to 8 colours per palette, and unlimited saves.
Do I need an account to use it?
No. You can generate palettes, preview them, and export a 1× PNG without signing up. An account is only required to save palettes or to buy a Pro pass.
How much does Pro cost?
Pro is a one-time payment, not a subscription: $29 for lifetime access. There is no auto-renewal.
What can I export?
4K PNG and WebP images (with custom dimensions up to 8192px), MP4 video, and code as React, CSS, Tailwind, JSON, or a JS shader. Pro also includes REST API access at 500 requests per day, documented at instantgradient.com/docs/api.
Can I use the exports commercially?
Yes. Every gradient, image, video, and code snippet you export is yours to use for personal or commercial work, with no attribution required.
Do you have an affiliate program?
Yes. Any account can join for free and earn 40% of the first payment of every customer they refer, paid out by Wise or PayPal. Details at instantgradient.com/affiliates.