CSS Gradients Explained: Linear, Radial, and Color Stops

A CSS gradient is a smooth blend between two or more colors, written directly as a value with no image file involved. It scales to any size, stays sharp on every screen, and adds nothing to page weight. The syntax is short but has a few parts that trip people up: the angle of a linear gradient, the shape of a radial one, and how color stops place each color. This guide walks through each part with examples you can paste straight into a stylesheet, and you can build any of them visually in the CSS Gradient Generator, which writes the code for you as you drag.

Linear gradients and the angle

A linear gradient blends colors along a straight line. You set that line's direction with an angle in degrees, and the part that surprises people is where zero points: 0deg points to the top, so the gradient runs bottom to top. Angles increase clockwise, so 90deg points to the right, 180deg points down, and 270deg points left. Negative angles simply rotate the other way.

/* bottom to top */
background: linear-gradient(0deg, #6366f1, #ec4899);

/* left to right (90deg == 'to right') */
background: linear-gradient(90deg, #6366f1, #ec4899);

/* diagonal, bottom-left to top-right */
background: linear-gradient(45deg, #6366f1, #ec4899);

If you prefer words to numbers, CSS also accepts keywords like to right or to bottom left, which read more clearly in a stylesheet. The generator emits the numeric angle, since a slider maps naturally to degrees, but the two are interchangeable: 90deg and to right produce the same result.

Radial gradients: circle and ellipse

A radial gradient blends outward from a center point instead of along a line, so the first color sits in the middle and the last one reaches the edge. Its shape is either a circle, which spreads evenly in all directions, or an ellipse, which stretches to match the box's proportions. If you leave the shape out, CSS defaults to ellipse, so it is worth stating the shape explicitly to be sure of what you get.

/* even circle from the center */
background: radial-gradient(circle, #6366f1, #ec4899);

/* ellipse that follows the element's shape */
background: radial-gradient(ellipse, #6366f1, #ec4899);

Color stops and positions

Both gradient types use the same building block: a color stop. Each stop is a color, optionally followed by a position from 0% to 100% that says where along the gradient that color should peak. A gradient needs at least two stops, and you can add as many more as you like. Leave the positions off and the browser spaces the stops evenly; add them and you control exactly where each color sits and how fast it fades into the next.

/* three colors, evenly spaced automatically */
background: linear-gradient(90deg, #6366f1, #22d3ee, #ec4899);

/* the same three colors, placed by hand */
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 40%, #ec4899 100%);

Moving a stop's position is the main way you shape a gradient's feel. Two stops close together make a sharp band; two stops far apart make a slow, subtle fade. Placing two stops at the same position creates a hard line between two solid colors, which is a common trick for stripes. Dragging the markers in the generator shows each of these effects live, and the position values it writes are the same percentages you would type by hand.

Using a gradient in your CSS

A gradient is a kind of image, so it goes anywhere an image can: most often as the background of an element. You can set it on the background shorthand or on background-image, and because a gradient carries its own colors, no image request is made. Linear and radial gradients work in every current browser without a vendor prefix, so the value you copy works as written.

.hero {
  /* solid color first as a fallback, then the gradient */
  background-color: #6366f1;
  background-image: linear-gradient(135deg, #6366f1, #ec4899);
}

Build one without writing CSS by hand

Typing hex codes and guessing angles is slow, so the CSS Gradient Generator gives you a live preview and a draggable bar of color stops. Switch between linear and radial, set the angle or shape, drag stops to reposition them, click the bar to add one, and copy the ready-to-paste background declaration. It runs entirely in your browser, so nothing you build is uploaded, and the code it produces is the plain CSS described above with no framework or dependency attached.

Sources

• MDN: Using CSS gradients
• MDN: linear-gradient()
• MDN: radial-gradient()