How to use CSS Gradient Generator
- Choose a linear gradient for a direction, or a radial gradient for colors spreading from a center.
- Pick colors and their positions. Add up to eight stops, adjust the angle or center, and watch the preview.
- Copy the generated background declaration into your CSS, or download it as a CSS file.
A closer look
A gradient blends colors between stops along a direction or away from a center. Stop positions run from 0% to 100% and are sorted before generating CSS. Two stops at the same position make a sharp boundary. For linear gradients, 90 degrees runs left to right and 180 degrees runs top to bottom. Radial gradients use a circle or ellipse and a center position relative to the element. The generated declaration is ready to place inside an existing CSS rule.
A practical example
Place green at 0% and yellow at 100%, then choose 90° for a left-to-right blend. Copy the background declaration into an existing CSS rule.
A useful tip
The preview is one rectangular shape. A radial gradient’s appearance can change on an element with a different size or aspect ratio. Check text contrast wherever the gradient is used as a background.
Good questions. Simple answers.
Does Copy CSS include a selector?
No. It copies a background declaration, such as background: linear-gradient(...);. Put it inside the rule for your own element.
What does Random colors change?
It replaces stop colors while keeping your current type, positions, angle, and radial center. Reset restores the original two-stop example.
Explore all generators for related tasks and category-specific guidance, or read how Toolzafi handles your data.