CSS Gradient Generator
Design beautiful CSS gradients with live preview — then copy the code.
How to use the gradient generator
- Pick linear or radial, and set the angle for linear gradients.
- Adjust the color stops — add more, drag positions, remove extras.
- Watch the live preview, then copy the CSS.
Designing gradients that look good
The difference between a cheap-looking gradient and a beautiful one is usually restraint. Two or three stops beat five; colors that sit near each other on the color wheel (analogous) feel calm, while opposites (complementary) feel electric — pick the mood first. A 135-degree diagonal is the crowd-pleaser for backgrounds because it reads as light falling across the page. For text overlays, keep gradients subtle and always check contrast: white text over a light gradient fails readability fast. And remember that gradients render crisply at any size with zero image weight, which makes them perfect for hero sections, buttons, and cards where a background image would just slow things down.
Frequently asked questions
What is the difference between linear and radial gradients?
Linear gradients blend colors along a straight line at your chosen angle. Radial gradients blend outward from a center point in an ellipse or circle — great for glows and vignettes.
How many color stops should I use?
Two or three for most designs. More stops give finer control (like multi-hue sunsets), but each extra stop is another chance to clash.
Will the CSS work in all browsers?
The standard linear-gradient() and radial-gradient() syntax works in every modern browser. Very old browsers (pre-2013) needed vendor prefixes, but those are long extinct in practice.
Can I use transparency in gradients?
Yes — pick colors with alpha (use the color picker's opacity if available, or RGBA values) to fade into whatever sits behind the element.