CSS Gradient Generator – Linear, Radial and Conic Gradients
Build beautiful gradient backgrounds in seconds. Choose linear, radial or conic, pick up to six colours, drag their positions and copy ready-to-use CSS — or download the gradient as a full-HD PNG.
Choose a gradient type, set the angle or position, pick colours for each stop and drag the stops to where each colour should sit. The preview and CSS update instantly. Copy the background code (a solid fallback is included) or click Download PNG to get a 1920×1080 image for slides, wallpapers or social posts.
How to use CSS Gradient Generator
- Pick a preset or choose linear, radial or conic.
- Set the angle (linear, conic) or shape and position (radial).
- Change the colours and drag each stop.
- Add up to six colours or press Random for ideas.
- Copy the CSS or download the PNG.
The three gradient types
| Type | CSS function | Typical use |
|---|---|---|
| Linear | linear-gradient(135deg, …) | Backgrounds, buttons, hero sections |
| Radial | radial-gradient(circle, …) | Spotlights, glows, vignettes |
| Conic | conic-gradient(from 0deg, …) | Pie charts, colour wheels, shiny effects |
In a linear gradient, 0deg points up and angles turn clockwise, so 90deg runs left to right and 180deg top to bottom. Each colour stop has a position in percent; two stops at the same position create a hard edge instead of a blend, which is handy for stripes.
Making gradients look good
- Use colours that sit close on the colour wheel (blue → purple, orange → pink) for smooth blends.
- Avoid blending complementary colours directly (red → green); the middle turns grey. Add a third stop in between instead.
- Keep text readable: check the darkest and lightest parts of the gradient with the Color Contrast Checker.
- Add a solid background colour before the gradient as a fallback; the generated CSS does this for you.
Download as an image
The PNG export draws the same gradient on a 1920 × 1080 canvas — useful for presentation backgrounds, YouTube thumbnails, desktop wallpapers or placeholder images. Resize it afterwards with the Image Resizer if you need another format.
Browser support
Linear and radial gradients work in every browser in use today without prefixes. Conic gradients are supported in all current versions of Chrome, Edge, Firefox and Safari. Gradients are generated by the browser, so they stay sharp on every screen and add no download weight.
More design tools
Generate matching colour schemes with the Color Palette Generator, combine your gradient with a box shadow or a frosted panel from the Glassmorphism Generator, and convert colour codes with HEX to RGB Converter.
Gradient ideas
Subtle gradients between two shades of the same colour look calm and professional, while bold diagonal blends of two bright hues work well for call-to-action sections. Stack a gradient over a photo with transparent stops to darken it and keep white text readable.
You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.
Frequently asked questions
How do I make a gradient background in CSS?
Use background: linear-gradient(135deg, #06b6d4, #8b5cf6). Copy any gradient from this generator.
What angle should a linear gradient use?
90deg goes left to right, 180deg top to bottom and 135deg diagonally from top left.
Can I use more than two colours?
Yes. Add up to six colour stops and set the position of each one.
How do I download a gradient as an image?
Click Download PNG to save a 1920×1080 image of the current gradient.
Do CSS gradients work in all browsers?
Linear and radial gradients work everywhere; conic gradients work in all current browsers.
Last updated: