Build CSS gradients — linear or radial, multi-stop, with live preview and copy-ready code.
Tip: 90deg runs left to right; 180deg runs top to bottom; 0deg runs bottom to top.
How to use this tool
Two or more hex colours, comma-separated, with optional positions like 0% and 100%.
Linear for backgrounds and buttons; radial for glows and vignettes.
Linear gradients only — 90deg is the classic left-to-right fade.
Copy result gives a ready-to-paste background declaration.
Formula & worked example
linear-gradient(90deg, #F9621B 0%, #FFD166 100%) runs orange to yellow, left to right.
Limitations — read this before you rely on it
Only hex colours are accepted (named colours like "red" are rejected so the output is unambiguous). Very old browsers (pre-2013) need vendor prefixes, which this output omits.
Frequently asked questions
90deg. 0deg runs bottom to top, 180deg runs top to bottom, 270deg runs right to left.
As many as you like — three or more stops create multi-colour fades and rainbow effects.
No — stops without positions are spread evenly, but explicit positions give exact control.
Modern browsers all support linear-gradient and radial-gradient without prefixes.
Linear fades along a straight line; radial fades outward from a centre point in a circle or ellipse.