Design beautiful gradients in seconds
This gradient generator is a full gradient studio. Drag colour stops on the bar, add as many colours as you like, and switch between linear, radial, conic and mesh gradients. Smooth OKLCH blending avoids the muddy grey band you get in plain CSS gradients, and a subtle grain effect gives the modern, textured look popular in app and web design.
How to make a gradient
- Pick a preset or start with two colours.
- Add, move and recolour stops; set the angle or position.
- Turn on OKLCH smoothing and grain if you like.
- Check it on the website, phone and card mockups.
- Copy the CSS, Tailwind or SVG code — or download a wallpaper up to 4K.
Gradient types
| Type | Looks like | Good for |
|---|---|---|
| Linear | Colour changes along a line | Buttons, headers, backgrounds |
| Radial | Glow from a centre point | Spotlights, soft backgrounds |
| Conic | Colours around a circle | Charts, colour wheels, rings |
| Mesh | Soft blobs of colour | Hero sections, wallpapers, social posts |
Wallpapers for every screen
Download your gradient as a high-resolution wallpaper for iPhone, Android, laptop, 4K monitor or as Instagram and YouTube backgrounds. Grain is rendered into the image so it looks the same everywhere.
Tips
- Use colours close on the colour wheel for smooth, calm gradients.
- Keep text on gradients readable — test it with the WCAG contrast checker.
- Build the colours from your brand palette with the color palette generator.
Four kinds of gradient
- Linear: colours blend in a straight line at any angle — the classic website hero background.
- Radial: colours spread out from a point — good for spotlights and soft glows.
- Conic: colours rotate around a centre — for pie-like effects and colour wheels.
- Mesh: several soft colour blobs blended together — the modern “aurora” look for apps and posters.
Copy code for your project
- CSS: paste into
backgroundorbackground-image. - Tailwind: ready classes or an arbitrary value.
- SVG: for design tools and apps that don’t read CSS.
A simple CSS example: background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
Download as an image
Download a PNG (1920 × 1080 by default) to use as a wallpaper, slide background, YouTube thumbnail base or social post background.
Tips for good-looking gradients
- Use colours that are close on the colour wheel for smooth blends; opposite colours can create a muddy grey middle.
- Add a middle colour stop to keep the transition bright.
- Check text contrast on top of the gradient with the contrast checker.
- Save favourites with ♡ and share a link to the exact gradient with your team.
Need matching brand colours first? Start with the color palette generator.