Something wrong with this tool?
About CSS Gradient Generator Online
This tool builds CSS linear, radial, and conic gradients visually. Add color stops, choose direction or angle, set transparency, and the tool generates the matching CSS code ready to paste into your stylesheet.
Gradients are everywhere in modern web design: hero backgrounds, button states, card accents, and gradient text. Hand-crafting CSS gradient syntax is fiddly — visual editing lets you experiment with smooth transitions without trial-and-error edits.
The output supports modern features like multiple color stops, percentage positioning, hue interpolation in different color spaces, and conic gradients for circular effects. Copy as CSS or as a Tailwind utility class.
How to use this tool
How to assemble a two-stop linear-gradient CSS declaration
Pick the stops
"Color 1" and "Color 2" accept any CSS color: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba with alpha, or named colors (`navy`). The first stop is at 0%, the second at 100%.
Set the angle
"Angle (deg)" controls the gradient direction in degrees. `0` flows bottom→top, `90` left→right, `180` top→bottom (the CSS default), `45` is the classic diagonal.
Press Run
Result returns a single `css` field: `linear-gradient(<angle>deg, <color1>, <color2>)`. Paste directly as a `background:` or `background-image:` value.
Beyond two stops
For radial, conic, or 3+ stops, edit the output manually — the syntax is `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Or move to a richer gradient editor; this tool is intentionally minimal for two-stop linears.