Gradient Generator
Design beautiful gradients and mesh gradients, then copy the CSS or download them as high-resolution wallpapers and backgrounds.
Drag the dots on the preview to move the colours. Click a dot to select it.
How to use Gradient Generator
- 1
Pick a type or preset
Choose linear, radial, conic or mesh, start from one of 20 curated presets, or press Random for fresh ideas.
- 2
Fine-tune the colours
Click the gradient bar to add colour stops and drag them into place. For mesh gradients, drag the colour points on the preview. Add grain for a modern texture.
- 3
Copy or download
Copy CSS, Tailwind or SVG code, or download an image at 4K, phone, Instagram or a custom size.
A free CSS gradient and mesh gradient generator
Gradients are everywhere in modern design: website heroes, app backgrounds, presentation slides, social media posts and phone wallpapers. This generator lets you build them visually and get both the code and the image, without installing anything or creating an account.
Four types of gradient
- Linear: colours blend along a straight line at any angle. The classic choice for buttons, headers and backgrounds.
- Radial: colours spread out in a circle from a centre point you choose, great for glows and spotlights.
- Conic: colours sweep around a centre point like a colour wheel, ideal for pie-style effects and vivid abstract backgrounds.
- Mesh: several soft colour points blend freely into each other, creating the organic, dreamy backgrounds popular in modern UI and branding.
Colour stops, presets and random gradients
Click anywhere on the gradient bar to add a colour, drag the handles to move them and pick any colour for each stop. Start from curated presets such as Cobalt, Sunset, Aurora or Mesh pastel, or press Random to generate harmonious palettes based on colour theory.
Grain and noise texture
A subtle grain makes gradients feel less digital and prevents visible colour banding, especially on large screens and in print. Use the Grain slider to add a film-like noise texture to your downloaded image.
Copy CSS, Tailwind or SVG
The code panel gives you ready-to-paste linear-gradient(), radial-gradient() and conic-gradient() CSS. Mesh gradients are exported as layered radial gradients that work in every modern browser. You can also copy a Tailwind CSS class or an SVG version that scales without losing quality.
Wallpapers in any size
Download your gradient as a PNG, JPG or WEBP wallpaper for desktop (Full HD, QHD or 4K), MacBook, iPhone, Android, iPad, Instagram posts and stories, X headers, Open Graph images or any custom size up to 8000 pixels.