About this tool
Pick two colors, choose linear or radial, set the angle, and get a live preview plus copy-ready CSS using the modern background-image syntax. Everything renders in your own browser, so what you see is exactly what the code produces.
Gradients went from a 2010s skeuomorphic relic to a defining feature of contemporary interfaces — hero backgrounds, button fills, mesh-like brand washes. The CSS syntax is simple but fiddly to remember (angle conventions, color-stop order), which is what a visual builder removes.
How to use it
- Choose the two colors with the pickers.
- Pick linear or radial; set the angle for linear gradients.
- Copy the generated CSS into your stylesheet.
Frequently asked questions
What does the angle mean in a linear gradient?
The direction the gradient travels: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. It rotates clockwise.
Can I add more than two color stops?
Yes in CSS — just append more comma-separated colors, optionally with percentage positions: linear-gradient(90deg, red 0%, gold 50%, green 100%).
Do gradients hurt performance?
CSS gradients are rendered by the browser and are dramatically lighter than image files — no download, infinitely scalable, and they respect device pixel density automatically.