InstantGradientControls
The ultimate mesh gradient generator.
Everything you need to create and export amazing mesh gradients. Free, browser-based, no sign-up. Generate harmonious palettes, render animated WebGL shaders, and ship the result as image, video, or code.
- 01Generate a paletteHit space or click Generate. Color theory rules pick 2 to 8 harmonious colors automatically.
- 02Pick a styleMesh, Liquid, Wave, Silk, or Stripe. Five shaders, each tuned for a different look.
- 03Tune the lookDistortion, swirl, scale, speed, grain. Sliders that update the gradient in real time.
- 04Export anywhere4K image, MP4 video, React, CSS, Tailwind, JSON, or call the REST API from your own code.
- 4K PNG
- 4K WebP
- Up to 8192px
- MP4 H.264
- Custom duration
- Up to 4K
- React component
- Tailwind v4 tokens
- CSS variables
- Vanilla JS shader
- JSON spec
- REST endpoints
- Palette generation
- Color lookup
A mesh gradient blends multiple colors 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 the watercolor-like blend you can't get from CSS alone.
InstantGradient renders mesh gradients as live WebGL shaders so they animate at 60fps, scale up to 4K without losing quality, and export to whatever format your project actually needs.
| Feature | Free | Pro |
|---|---|---|
| Unlimited palette generation | ||
| Five gradient styles | ||
| PNG / WebP image export | 1× | Up to 4K |
| MP4 video export | ||
| Code export (React, CSS, JSON) | ||
| Visual effects (Glass, Grain) | ||
| REST API access | ||
| Saved palettes | 5 | Unlimited |
| Palette colors | Up to 5 | Up to 8 |
Pro = $9 annual or $19 lifetime. One-time, no auto-renewal.