A CSS gradient is an image the browser draws for you, so it costs no download, scales to any size and can be edited in a line of text. The syntax is short but has a few details that are easy to get backwards: which way an angle points, how color stops are ordered, and how to get a sharp line instead of a blend. This guide covers those details using our CSS Gradient Generator, with the exact CSS it produced for each example.
What a gradient is made of
A gradient has two kinds of ingredients. The geometry says how colour travels: along a line at an angle (linear-gradient) or outward from a point (radial-gradient). The color stops say which colours appear and where. A stop is a colour plus a position, such as #0ea5e9 0%, and the browser blends smoothly between neighbouring stops. A gradient needs at least two stops.
Because a gradient is an image, you set it with background or background-image, not with color or background-color.
Using the generator
- Choose Linear or Radial at the top of the Customize panel.
- For linear, set the Angle slider (0 to 360 degrees). For radial, choose a Shape (Circle or Ellipse) and a Position.
- Edit the Color Stops: each row has a colour swatch, a position slider from 0 to 100%, and a remove button. Add Stop adds a row.
- Optionally load a starting point from Quick presets: Sunset, Ocean, Candy, Forest, Fire or Monochrome.
- Click Copy CSS when the Live Preview looks right.
On load, the tool shows a two-stop gradient and this CSS:
background: linear-gradient(90deg, #0ea5e9 0%, #4f46e5 100%);
What the angle means
The angle is the direction the colour travels, measured clockwise from "up". We rendered a red-to-blue gradient at several angles and sampled the corners:
0deg: the colour runs from the bottom to the top. The bottom edge is red (the first stop) and the top is blue.90deg: left to right. The left edge is red, the right edge blue. This is the generator's default.180deg: top to bottom. The top is red, the bottom blue.135deg: toward the bottom-right corner, the common diagonal look. The presets do not set an angle; you choose it.360degis the same as0deg; the slider's top end simply wraps around.
The keywords to right or to bottom mean the same as 90deg and 180deg, but the generator always writes degrees. If a gradient runs the "wrong way", the fix is almost always to add or subtract 180.
Color stops: positions, order and hard edges
Stops are sorted by position. The tool writes the stops in position order, whatever order the rows are in. In our test, a fourth stop added to the Sunset preset and set to 75% came out in the right place between the 50% and 100% stops: linear-gradient(135deg, #f97316 0%, #db2777 50%, #facc15 75%, #7c3aed 100%). So the order of the rows does not matter.
Two stops at the same position make a hard edge. Instead of blending, the colour switches abruptly. We rendered linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%) and sampled the pixels: red at 10% and 48% of the width, blue at 52% and 90%, with no blend between. Use this for stripes, flags and split backgrounds.
A quirk to watch for. Add Stop always inserts a grey #888888 at 50%. If your gradient already has a stop at 50%, as every preset except Monochrome does, you suddenly have a hard edge in the middle. Starting from Sunset and clicking Add Stop gave #db2777 50%, #888888 50%, a sharp jump from pink to grey. Move the new stop's slider and change its colour straight away.
Minimum of two. The remove button disappears when only two stops are left, because a gradient needs at least two.
The six presets, as the tool writes them at 135 degrees:
- Sunset:
#f97316 0%, #db2777 50%, #7c3aed 100% - Ocean:
#0ea5e9 0%, #2563eb 50%, #4f46e5 100% - Candy:
#ec4899 0%, #f472b6 50%, #fb923c 100% - Forest:
#16a34a 0%, #059669 50%, #0d9488 100% - Fire:
#fbbf24 0%, #f97316 50%, #dc2626 100% - Monochrome:
#334155 0%, #94a3b8 100%
A preset does not change the gradient type or angle; it only replaces the stops.
Build a gradient and copy the CSS
Open the Gradient GeneratorRadial gradients
A radial gradient starts at a point and spreads outward. In Radial mode you choose a shape and a position. The default is radial-gradient(circle at center, #0ea5e9 0%, #4f46e5 100%). With Ellipse and Top Right selected on the Ocean preset, the output is:
background: radial-gradient(ellipse at top right, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%);
The nine position choices are Center, Top, Bottom, Left, Right and the four corners. A circle keeps equal width and height, while an ellipse stretches to the box's proportions. The tool does not output a size keyword, so the browser's default applies (the gradient reaches the farthest corner). Radial gradients suit spotlights, glows behind headings and soft vignettes.
Common mistakes
- Using
background-colorwith a gradient. A gradient is an image, sobackground-color: linear-gradient(...)is invalid. The tool writesbackground:, which is correct. - No fallback. Every current browser supports these gradients, but a solid
background-colordeclared just before is still good practice, and it fills any area the gradient does not cover. - Text contrast. Text over a gradient has a different background at every point. Check contrast at the lightest and darkest spots, not only at one.
- Muddy middles. Blending two very different colours, such as blue and yellow, can pass through a dull grey-green. Add a middle stop with a deliberately chosen colour to steer the blend, which is what the presets do.
What the generator does not cover
The tool builds linear-gradient() and radial-gradient() with hex colours. CSS also has conic-gradient() (colour sweeping around a point), the repeating- variants, transparent or alpha colours, and layering several gradients in one background. You can add those by editing the copied line, for example rgba(14, 165, 233, 0) as a final stop to fade to transparent. For tiled stripes and dots, the Pattern Generator is a better starting point.
Where gradients fit: page and section backgrounds are the obvious use. Gradients are also handy on buttons (see the CSS Button Generator), as the colourful scene behind a frosted card (the Glassmorphism Generator uses gradient scenes the same way), and as an overlay on a photo to improve text contrast: a transparent-to-dark gradient over the bottom of an image makes a caption readable.
Privacy
The tool turns your slider values into one line of CSS inside the page. Its code makes no network requests except the optional feedback form; we watched network activity while changing every control and saw nothing sent. The page loads styling and icons from a public CDN when it opens.
Quick answers
Why is my gradient just one colour? Both stops may have the same colour, or both sit at the same position, producing a hard edge with nothing to blend.
Can I use more than two colours? Yes, as many as you like with Add Stop.
How do I get a diagonal gradient? Use an angle such as 45 or 135 degrees.
Does the preview match the copied CSS? Yes; the preview applies the same value that appears in the code box.
Build a gradient and copy the CSS
Open the Gradient Generator