CSS gradient generator
Write your color stops one per line and get CSS you can paste straight into a stylesheet. It suits developers and designers who want clean gradient code without dragging sliders.
- Runs in your browser
- Free, no account needed
- Copy or download the result
Result
Example
#ff6347 0% #ffd700 50% royalblue 100%
background: #ff6347; background: linear-gradient(90deg, #ff6347 0%, #ffd700 50%, #4169e1 100%); Stops: 3. The first line is a solid fallback for browsers that cannot draw gradients.
How to use the css gradient generator
- Type one color stop per line in the box, such as #ff6347 0%, with an optional position.
- Choose a Gradient type, then set the Angle in degrees (linear and conic) or the Radial shape.
- Pick a Fallback color and press Run.
- Press Copy result to paste both background lines into your CSS.
How it works
You need 2 to 20 stops. Each line is any color the color converter accepts, followed by an optional position from 0% to 100%.
Positions must not go backward, and a position without a % sign is rejected. Every color is checked and written as hex in the output.
Linear gradients use the angle, where 90 runs left to right. Conic gradients start from the angle, and radial gradients use an ellipse or circle from the center.
The first output line is a solid color for browsers that cannot draw gradients. It is either the first stop or the plain average of the stop colors, and any translucent stop is blended over white first so the fallback is always opaque.
Everything runs in your browser. Your input is not uploaded or stored.
Questions and answers
What does the angle mean in a linear gradient?
0deg points up, 90deg points right, 180deg points down and 270deg points left. The gradient runs in that direction from the first stop to the last.
Why add a fallback background color?
If a browser or email client cannot draw the gradient, it skips that line and uses the solid color above it, so text stays readable.
Can I use transparent colors?
Yes. Colors with alpha, such as rgb(255 0 0 / 50%), are kept as 8 digit hex codes in the gradient.