Build a smooth 2- or 3-color CSS gradient, preview it live and copy the code. Linear gradients ready for any site.
| Input | Result |
|---|---|
| #7c3aed → #06b6d4 | violet to cyan, a modern SaaS look |
| #f97316 → #db2777 | sunset orange to pink |
| #0ea5e9 → #f59e0b → #dc2626 via 3 colors | sky to amber to red, three stops |
Copy the 'background:' line into your CSS for any element, buttons, hero sections, cards. It works in every modern browser.
Six-digit hex, with or without the # sign (e.g. 7c3aed or #7c3aed). Invalid entries fall back to the defaults.
The generated line uses 135°, a good default diagonal. Edit the number directly in the copied CSS, 90deg is left-to-right, 180deg is top-to-bottom.