Figma plugin
Search SketchValley illustrations and drop them straight into your Figma frames.
- Search the whole library inside Figma
- Inserts editable vectors, not flat images
- Free, no account needed
Free Gradient Generator
Shuffle beautiful, harmonious gradients — linear, radial, conic, diamond, mesh, or glowing orb wallpapers with rim-lit spheres. Edit every colour, add grain, turn a photo into a gradient, then copy the CSS, download a crisp wallpaper up to 8K, or animate it and save a looping MP4. No signup, no watermark.
Runs in your browser
⚡ Mesh gradients · Animated MP4 · CSS & Tailwind · 4K wallpapers
Drop your photo to turn its colours into a gradient
Have a photo you love? — or drop / paste it here.
Why Use This Gradient Generator?
Palettes That Work
Shuffle builds colour-harmony palettes — pastel, vibrant, sunset, ocean, aurora and more. Lock the colours you love and shuffle the rest.
True Mesh Gradients
Drag, recolour and soften up to 8 colour points, or copy a CSS version.
Photo to Gradient
Drop in any photo and its main colours become a mesh gradient, placed roughly where they appear in the picture.
Smooth, Banding-Free
Colours blend in OKLab so opposite hues never go muddy grey, and downloads are dithered so 4K wallpapers stay silky.
Animated MP4
Press Play to make any gradient sway, spin, pulse or cycle its colours, then download a 1080p MP4 that loops seamlessly.
Developer Ready
Copy clean CSS or a Tailwind class — grain included, as a lightweight inline SVG noise layer.
How to generate a gradient online
1
Start with a gradient
Pick a preset, press Shuffle (or Space) for a harmonious palette, or drop in a photo to turn its colours into a gradient.
2
Make it yours
Switch between linear, radial, conic, diamond and mesh. Edit or lock any colour, drag on the preview to change the angle, centre or mesh points, and add grain. Undo anything with Ctrl/⌘ Z.
3
Pick a size
Choose Desktop, 4K, iPhone, Instagram story, a banner or a custom size — the preview matches it exactly.
4
Export
Copy the CSS or Tailwind class, download a PNG, JPG or WebP — or press Play and download a seamlessly looping MP4 video.
Frequently Asked Questions
Is this gradient generator free?
Yes, completely free with no signup and no watermark on downloads, including 4K wallpapers.
Does it support mesh gradients?
Yes. Mesh mode blends up to 8 colour points you can drag, recolour and soften. You can animate them and download a looping MP4, or copy a CSS approximation built from layered radial gradients.
Can I make glowing orb wallpapers?
Yes. The Orbs style layers soft spheres over a background gradient, each with its own core, edge and rim-light colour, edge blur and halo — the look of modern phone wallpapers. Drag an orb to move it, and its glowing knob to resize it and aim the light. Try the Horizon preset.
Can I download an animated gradient as MP4?
Yes. Press Play on any gradient and pick a motion — sway, orbit or drift, spin, pulse or a full hue cycle. Then download a 1080p MP4 of 3 to 10 seconds that loops seamlessly, ready for backgrounds, stories and screens.
Can I get the CSS code?
Yes — plain CSS or a Tailwind class for linear, radial, conic and mesh gradients, including grain as an inline SVG noise layer. Diamond gradients have no CSS equivalent and download as an image.
Why do my gradients look smoother here?
Colours are blended in the OKLab colour space, which avoids the grey, muddy middle you get when mixing opposite colours in plain RGB, and every download is dithered so large wallpapers don't show banding. Prefer the classic look? Switch Blend to Classic.
Can I make a gradient from a photo?
Yes. Drop or paste a photo and the tool picks its main colours and places them as mesh points roughly where they appear in the photo. The photo never leaves your browser.
What sizes can I download?
Desktop, 4K, MacBook, iPhone and Android wallpapers, Instagram posts and stories, X, LinkedIn and YouTube banners, or any custom size up to 8000 pixels per side, as PNG, JPG or WebP.