How to use the css gradient generator
- 1Start from a preset or keep the default colors.
- 2Choose Linear, Radial or Conic.
- 3Set the angle, then edit each color stop's color and position.
- 4Add up to eight stops, or press Random colors for ideas.
- 5Copy the CSS and paste it into your stylesheet.
The three gradient types
- Linear gradients blend colors along a straight line. The angle sets the direction: 0° goes bottom to top, 90° left to right.
- Radial gradients spread out from the center as a circle or ellipse, good for glows and spotlights.
- Conic gradients sweep colors around a center point, like a color wheel or pie chart.
Color stops
Each stop is a color and a position from 0% to 100%. Stops close together create sharp transitions; stops far apart blend softly. Two stops at the same position make a hard edge, which is useful for stripes.
The CSS
The output sets a solid background-color first, as a fallback, then the background-image gradient. Gradients are drawn by the browser, so they stay sharp at any size and add nothing to page weight.
Tips
- Gradients between two very different hues can look muddy in the middle. Add a third stop in between to keep them vivid.
- Keep text readable: check text over the lightest and darkest parts of the gradient with the Contrast Checker.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients are supported by all modern browsers without prefixes.
How do I make a hard color edge?
Put two stops at the same position, for example red at 50% and blue at 50%.
Can I use a gradient on text?
Yes. Apply the gradient as a background, then add background-clip: text and color: transparent to the text element.
Last updated