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 five shader styles: 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.
- 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
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 five 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 |
| Fluted glass effect | ||
| REST API access | 500 / day |
Pro = $9 annual or $19 lifetime. One-time, no auto-renewal.
Is InstantGradient free?
Yes. The generator is free and needs no account. Free includes unlimited palette generation, all five 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, the fluted-glass effect, 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: $9 for an annual pass or $19 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.