How this css generator works
Pick a background type on the left, drag the color swatches or angle slider, and the CSS on the right updates as you go. When it looks right, hit copy and paste the single declaration straight into your stylesheet — no build step, no extra markup required.
Linear vs. radial vs. solid
A linear gradient moves color along a straight line at whatever angle you set — 0° runs bottom to top, 90° runs left to right, and so on. A radial gradient instead spreads color outward from a center point, which reads more like a glow or spotlight than a directional blend. Solid is just a flat color, useful when you want the generator's color picker without any gradient math at all.
Tips for backgrounds that don't fight your content
Keep contrast in mind before you fall in love with a gradient. Text sitting on top of a busy multi-stop gradient can become hard to read, especially near the middle where colors blend into a muddy midtone. If you're placing text over the background, test it with your actual copy rather than judging the gradient in isolation.
Two-color gradients with a wide angle (30–60 degrees or so) tend to look intentional rather than accidental. Very tight or very wide angles can end up looking like a rendering glitch rather than a design choice, particularly on wide screens.
Common questions
What's the difference between a linear and radial gradient?
Linear gradients transition color along a straight line at a set angle. Radial gradients transition outward from a center point instead, like a spotlight. Both use the same background property, just a different function name.
Can I use more than two colors in a gradient?
Yes — CSS gradients accept any number of stops, each with its own position. This tool supports up to five, which covers almost every real design case.
Will this CSS work in older browsers?
linear-gradient and radial-gradient have been supported without vendor prefixes in every major browser for years now, so what you copy here will work as-is.