How to use CSS Gradient Generator
- Pick Linear, Radial or Conic, or start from one of the presets.
- Drag the handles on the color bar, click the bar to add a stop, and change each color and position in the list below.
- Adjust the angle or center point, then press Copy CSS.
About this tool
A CSS gradient is an image the browser draws for you, so it stays sharp at any size and costs no download. Linear gradients blend along a straight line at the angle you choose (90° runs left to right, 180° top to bottom). Radial gradients spread out from a center point as a circle or ellipse. Conic gradients sweep around a center point like the hands of a clock, which is handy for pie charts and color wheels.
Each color stop sets a color at a position between 0% and 100%. Placing two stops at the same position makes a hard edge instead of a blend, and Repeating tiles the pattern, which is how stripes and rings are made.
The generated CSS includes an optional solid fallback color, the average of your stops, so text stays readable on the rare browser that cannot draw the gradient. All modern browsers support linear, radial and conic gradients without prefixes.
Questions and answers
How do I use the CSS?
Paste the copied lines into the rule for your element, for example .hero { … }. The background property accepts the gradient just like an image.
How do I make a hard line instead of a blend?
Put two stops at the same position with different colors, for example red at 50% and blue at 50%.
Can I put a gradient on text?
Yes. Use the gradient as the background, then add background-clip: text and color: transparent to the text element.
Why does my gradient look banded?
Very long gradients between similar dark colors can show visible steps on some screens. Add a middle stop or increase the color difference to smooth it out.