How to Write a CSS Gradient
By Tools Star Hub Editorial Team · Published · Updated
A CSS gradient is a background that fades between color stops. This page writes a linear-gradient, radial-gradient or conic-gradient from the stops you set, for a background or for text. You need at least two stops. Each position is rounded to a whole percent between 0 and 100.
For a background, the copy is one background line. For text, it is a short rule with a solid color fallback, and an HTML snippet is available too. The page does not accept pasted CSS.
How to build a gradient
- Choose linear, radial or conic. Linear fades along a line, radial spreads from a center, and conic sweeps around a center like a color wheel.
- Set a color and a position for each stop. Add or remove stops until you have at least two.
- Set the angle or the center. Linear and conic gradients use an angle. Radial and conic gradients use a center point. The default linear fade is 90 degrees from #336699 at 0% to #ffffff at 100%.
- Copy the background declaration. A stop position that is not a whole percent is rounded. A position outside 0 to 100 is kept inside that range.
Example
The default linear gradient
background: linear-gradient(90deg, #336699 0%, #ffffff 100%);
A radial gradient with three stops
background: radial-gradient(circle, #336699 0%, #000000 50%, #ffffff 100%);
FAQ
- Why is there no CSS yet?
- Fewer than two stops are set. The declaration is copied only after the second stop exists.
- Can I make a conic gradient?
- Yes. Choose Conic, then set the start angle and the center. Stop positions are a share of the full turn.
- What happens to 33.4%?
- It is rounded to a whole percent and kept between 0 and 100.
- Will older browsers get a prefixed copy?
- No. Background gradients are standard syntax without vendor prefixes. Gradient text adds -webkit-background-clip, which some browsers still need.
To copy a linear, radial or conic gradient, or gradient text, use the CSS Gradient Generator.