Gradients that look designed, not defaulted
Two rules carry most of the way. First, keep the two colors within about 60–90° of each other on the hue wheel (indigo→pink, teal→blue, orange→rose) — opposite-hue gradients pass through muddy gray in the middle. Second, angle matters: 90° (top-to-bottom) feels like lighting, 120–135° feels dynamic, and horizontal gradients read as backgrounds rather than surfaces.
Using the output
The copied CSS drops straight into any background: property — hero sections, buttons, cards. For text gradients, add background-clip: text; color: transparent;. Radial mode suits glows and spotlight effects; set it behind content at low opacity for the fashionable "aurora" look.
Frequently asked questions
How do I make a gradient in CSS?
background: linear-gradient(120deg, #4f46e5, #ec4899); — angle first, then color stops. This tool writes the line for you; paste it into any element's styles.
Why does my gradient look muddy in the middle?
The two colors sit opposite on the hue wheel, so interpolation passes through gray. Pick hues closer together, or insert a third mid-stop that keeps saturation up.
Can I use more than two colors?
CSS allows unlimited stops — after copying, add more comma-separated colors inside the function: linear-gradient(120deg, #4f46e5, #a855f7, #ec4899). Position stops with percentages for control.
Linear or radial — when?
Linear for surfaces, headers, and buttons; radial for glows, vignettes, and spotlight backgrounds. Radial from a corner at low opacity is the quickest way to add depth to a flat design.