CSS gradient generator
Build a gradient by eye and copy the CSS.
Drag a handle to move a stop, or click the bar to add one. Handles also move with the arrow keys.
Color stops
- %
- %
- %
Runs in your browser. Nothing you type is sent anywhere.
- Drag to place stops
- Linear, radial and conic
- 8 ready-made presets
How to make a CSS gradient
- Pick a preset, or set the color of each stop.
- Drag the handles on the bar, and click the bar to add a stop.
- Copy the CSS and paste it into your stylesheet.
Gradient types compared
| Type | How it spreads | CSS function |
|---|---|---|
| Linear | Along a straight line at an angle | linear-gradient() |
| Radial | Out from a center point | radial-gradient() |
| Conic | Around a center point, like a color wheel | conic-gradient() |
Browser support by gradient type
| Gradient type | Needs at least |
|---|---|
| Linear and radial | Every current browser, all the way back to IE10 with a prefix |
| Conic | Chrome 69, Firefox 83, Safari 12.1 |
The CSS this page gives you always starts with a plain background-color line first, so a browser that cannot draw the gradient still shows the first stop's color instead of a blank box.
Tips for smoother gradients
- Add a third stop in the middle so the gradient reads as two colors blending through a third, instead of a flat two-tone fade.
- For a hard edge instead of a blend, give two neighboring stops the same position.
- 0deg runs bottom to top and 90deg runs left to right. Add 180 to any angle to reverse a gradient's direction without retyping every stop.
- Match the radial shape to the box: circle for square elements, ellipse for wide ones, so the gradient does not look stretched.
CSS gradient generator FAQ
How do I make a gradient in CSS?
Set the background property to a gradient function, such as background: linear-gradient(90deg, #ff7e5f, #feb47b). The first value is the direction, then come the colors, each with an optional position.
What is the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line, a radial gradient spreads out from a center point, and a conic gradient sweeps around a center point like a color wheel or a pie chart.
Which way does the angle point?
0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom and 270deg from right to left. For conic gradients the angle sets where the sweep starts.
How do I get a hard line between two colors?
Give two neighboring stops the same position, such as red 50% and blue 50%. The color then switches at that point instead of blending.
Do CSS gradients work in every browser?
Linear and radial gradients work in every current browser. Conic gradients need Chrome 69, Firefox 83 or Safari 12.1 and later. The CSS here starts with a solid color line as a fallback.
Can I animate a CSS gradient?
You can animate background-position or background-size on an oversized gradient for a moving effect. Animating the stop colors themselves needs the CSS @property rule or a small script, since browsers cannot tween between two full gradient values on their own.
Can a gradient be used as text color?
Yes. Copy the gradient CSS here into a background, then add background-clip: text and color: transparent to the text element so the gradient shows through the letters instead of filling a box.