🌈 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. The angle sets the gradient line, along which the browser interpolates each colour channel from stop to stop; every pixel is coloured by its projection onto that line. Colour stops carry positions (0%–100%) that default to even spacing, so two colours sit at 0% and 100% and the midpoint is a 50/50 blend. 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.
What does the angle actually mean in CSS?
It is the compass-style direction the gradient travels, measured clockwise from up: 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom, 270deg = right to left. You can also use keywords like "to right" (= 90deg) or "to bottom right".
How do I add or move colour stops?
Copy the generated CSS and add comma-separated colours, each optionally with a percentage position: linear-gradient(90deg, #1d87f1 0%, #a855f7 60%, #f43f5e 100%). Positions let you control where each colour peaks and how wide each transition is.