🌈 CSS Gradient Generator
Pick two colors and an angle, watch the live preview, copy the CSS — linear-gradient() or radial-gradient() ready to paste.
background: linear-gradient(90deg, #1d87f1, #059669);How the css gradient generator works
The output is standard CSS: linear-gradient(angle, color1, color2) sweeps in the direction of the angle (0° points up, 90° right); radial-gradient(circle, color1, color2) radiates from the center. Both are universally supported and render with no image files — a gradient is instructions, not pixels.
Gradients read best between related colors — two blues, a blue and a violet — while distant hues can pass through muddy gray in between. If that happens, nudge one endpoint's hue closer, or route through a chosen midpoint by adding a third stop to the copied CSS.
Frequently asked questions
How do CSS gradient angles work?
0° points up, 90° right, 180° down — the angle is the direction of travel. The default "to bottom" equals 180°.
Linear or radial — when?
Linear for backgrounds, buttons and headers (directional sweep); radial for glows, spotlights and vignettes (center-out).
Why does my gradient look gray in the middle?
Interpolating between distant hues passes through low-saturation territory. Pick endpoints closer in hue, or add an intermediate color stop to steer around the gray zone.
Can I use more than two colors?
CSS accepts any number of comma-separated stops — copy the generated CSS and insert more, optionally with positions: linear-gradient(90deg, #a 0%, #b 50%, #c 100%).
Do gradients hurt performance?
No — they are computed by the renderer, cost no downloads, and scale to any size losslessly, unlike image backgrounds.