How to make a CSS gradient
- Choose Linear, Radial or Conic, or start from one of the preset swatches.
- Pick colors and drag each position slider. Add up to eight colors, reverse them or try a random pair.
- For linear and conic gradients set the angle; for radial and conic, choose where the centre is.
- Copy the CSS, or download a 1920 × 1080 PNG to use as a wallpaper or slide background.
Gradient types
A linear gradient blends along a straight line at an angle: 0deg goes bottom to top, 90deg left to right and 135deg from top left to bottom right. A radial gradient spreads outwards from a centre point as a circle or ellipse, which is great for spotlights and soft glows. A conic gradient sweeps around a centre like a color wheel, useful for pie charts and loading rings.
The CSS output includes a solid background color first, so very old browsers that do not understand gradients still get a sensible color. All modern browsers support the three gradient types without prefixes.
Tips for good-looking gradients
Gradients between colors that are close on the color wheel look smooth; complementary colors can turn grey in the middle. Adding a midpoint color with more saturation fixes that "muddy" band. For text on a gradient, check contrast at both ends. Everything is generated in your browser, and your last gradient is remembered.
How do I add a gradient to text?
Use the gradient as the background, then add background-clip: text; -webkit-background-clip: text; color: transparent; to the text element.
How do I make a hard color stop?
Put two colors at the same position, for example red at 50% and blue at 50%, to get a sharp line instead of a blend.
Does the PNG match the CSS exactly?
Very closely. Linear angles are computed the same way as CSS; browsers may dither slightly differently.