background: linear-gradient(135deg, #7c3aed 0%, #d946ef 50%, #0ea5e9 100%);About the CSS Gradient Generator
Build CSS gradients visually and copy the generated code. Add and reposition color stops, switch between linear and radial types, and set the angle or centre point while watching the result update live. Writing gradient syntax by hand means guessing at stop positions; doing it visually makes the relationship obvious.
How to use the CSS Gradient Generator
-
Choose linear or radial
Linear gradients blend along a straight axis; radial gradients spread outward from a centre point. Each exposes its own positioning controls.
-
Add and position color stops
Add stops, set each color, and drag them along the track to control where one color yields to the next.
-
Copy the CSS
Copy the generated background property and paste it straight into your stylesheet.
When to use it
Designing a hero background
Compose a multi-stop gradient for a landing page header and copy it directly into your CSS.
Styling buttons and cards
Create a subtle two-stop gradient that adds depth without the cost of a background image.
Learning gradient syntax
Adjust the controls and watch the generated CSS change to understand how angles and stop positions map to output.
Frequently asked questions
How does the angle work in a linear gradient?
In CSS, 0deg points upward and angles increase clockwise, so 90deg runs left to right. This differs from the mathematical convention, which is a frequent source of confusion.
Do CSS gradients need vendor prefixes?
No. Unprefixed linear-gradient and radial-gradient are supported by every current browser. Prefixes are only relevant for very old versions.
Can I animate a gradient?
CSS cannot interpolate between two gradient values directly. The usual approach is to animate background-position on an oversized gradient, or to cross-fade two layers.
Why does my gradient look banded?
Banding appears when a subtle gradient is stretched across a large area with limited color depth. Adding intermediate stops or a faint noise overlay reduces the effect.
Related tools
Browse all free online tools on Tooly — every one runs in your browser, with no account required.