Gradients add depth and personality to buttons, hero sections, and backgrounds, but hand-writing the CSS syntax is fiddly, especially with multiple color stops and angles. The ToolOrbit CSS Gradient Generator lets you build linear and radial gradients visually with a live preview, then copy clean, ready-to-paste code.
How CSS gradients work
A CSS gradient is an image generated by the browser from color stops. A linear gradient blends colors along a straight line defined by an angle or direction, while a radial gradient blends outward from a center point. Each color stop has a color and an optional position, giving you precise control over where one color hands off to the next.
- linear-gradient(): blends along an angle such as 90deg or to right
- radial-gradient(): blends outward from a center in a circle or ellipse
- Color stops: each color plus an optional percentage position
- Multiple stops: add three or more colors for richer transitions
.hero {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}
.badge {
background: radial-gradient(circle, #22d3ee 0%, #0ea5e9 100%);
}Building a CSS gradient visually
Choose linear or radial, add and recolor your stops, and drag to reposition them while the live preview updates in real time. Set the angle for linear gradients or the shape for radial ones. When the result looks right, copy the generated CSS straight into your stylesheet.
- Pick the gradient type: linear or radial
- Add color stops and choose each color
- Adjust positions and the angle or center
- Copy the generated CSS with one click
Tips for great gradients
Use gradients to guide the eye, such as a darker corner that draws focus to a headline. Test your gradient behind real text to confirm contrast and readability. For large backgrounds, two-stop gradients usually look cleaner than busy multi-stop ones. The ToolOrbit Gradient Generator makes it easy to experiment quickly and ship the exact look you want.
What the angle really means
| Keyword or angle | Direction |
|---|---|
| to top (270deg) | Bottom to top, like a sunrise |
| to right (90deg) | Left to right |
| to top right (45deg) | Diagonal, from bottom-left |
| 0deg | Top to bottom |
Adding a third stop in the middle of a two-color gradient, typically a tone in between, kills the muddy band — the single most common quick fix. Keep transitions going the same direction the light falls in your design, and sample against an image behind it before committing: gradients that look smooth on white can betray banding on a photo.
