CSS Gradient Generator
A CSS gradient is a background image. A red to blue left-to-right gradient is written as background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); and a white to black circular one as background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);.
How to use
- Pick a preset or start from the default, then choose Linear or Radial.
- For a linear gradient, set the angle with the slider or the number box. 0 degrees points up, 90 to the right, 180 down and 270 to the left. For a radial one, pick circle or ellipse and where the center sits.
- Edit the color stops: change a color with the color box or a HEX code, and set its position from 0 to 100 percent. Add up to 6 stops, remove stops, or press Even spacing to space them equally.
- Press Copy CSS. The first line is a plain color for old browsers, and the second is the gradient.
How it works
A linear gradient blends colors along a line. The angle sets the direction of that line in degrees, clockwise from the top: 0deg goes bottom to top, 90deg goes left to right. Each color stop pairs a color with a position along the line, and the browser blends smoothly between neighbouring stops.
A radial gradient blends outward from a center point. The shape is a circle or an ellipse that stretches to fit the box, and "at top left" and similar keywords move the center. Position 0 percent is the center and 100 percent is the far edge.
The tool sorts stops by position before writing the CSS, so the order you edit them in does not matter. Two stops at the same position make a hard edge instead of a blend. Positions are rounded to two decimals.
Colors accept 3, 6 or 8 digit HEX. The 8-digit form ends with an alpha pair, so #11182700 is fully transparent. A fade to transparent is shown over a checkerboard in the preview.
Angle cheat sheet
| Angle | Direction | Keyword form |
|---|---|---|
| 0deg | Bottom to top | to top |
| 90deg | Left to right | to right |
| 180deg | Top to bottom | to bottom |
| 270deg | Right to left | to left |
| 135deg | Top left to bottom right | to bottom right (roughly) |
FAQ
Why is the first line a plain color?
It is a fallback for environments that do not support gradients. Browsers that understand the second line use it instead, so you can delete the first line if you do not need the fallback.
What does 135deg mean?
The gradient line points to the bottom right: it starts at the top left corner and ends at the bottom right. 90deg is left to right and 180deg is top to bottom.
How do I make a hard stripe instead of a smooth blend?
Give two stops the same position. For example red at 50 percent and blue at 50 percent create a sharp edge at the middle.
How do I fade to transparent?
Use an 8-digit HEX for the last stop, such as #11182700. Fading to the keyword transparent can look gray in older browsers such as older Safari, so the same color with zero alpha is the safer choice.
Does it support conic gradients?
Not yet. This tool covers linear and radial gradients.
Is anything uploaded?
No. The preview and CSS are produced in your browser.