CSS Gradients Explained: linear-gradient, radial-gradient & Angles

A CSS gradient lets you blend two or more colors without an image file. It's a single line of CSS, renders instantly, needs no network request, and scales to any size without blurring. This guide covers the two gradient functions you'll actually use — linear-gradient() and radial-gradient() — plus angles, color stops, and copy-paste examples.

The one-line rule

Use linear-gradient() for direction (banners, buttons, dividers) and radial-gradient() for a focal point (spotlights, glows, vignettes). Both take a comma-separated list of colors and optional positions — no vendor prefixes needed in modern browsers.

1. linear-gradient: blending along a line

The simplest gradient just lists two colors:

background: linear-gradient(red, blue);

By default the line runs top to bottom. Add a direction keyword or an angle to change it:

background: linear-gradient(to right, red, blue);   /* left → right */
background: linear-gradient(90deg, red, blue);      /* same thing */
background: linear-gradient(to bottom right, red, blue); /* diagonal */

2. How angles work

An angle in linear-gradient is measured in degrees and describes the direction the gradient line travels. The colors run from the start of that line to the end:

This trips people up: 0deg points up, so with linear-gradient(0deg, red, blue) red is at the bottom and blue at the top. If you want red on top, use 180deg or the keyword to bottom.

3. Color stops and hard edges

Each color can carry an optional position — a percentage or length — that says where it sits on the gradient line:

background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);

Put two stops at the same position for a hard edge instead of a smooth blend:

background: linear-gradient(90deg, red 50%, blue 50%);  /* sharp split */

This is a common trick for striped patterns: repeat the stop pairs and you get clean bars without an image.

4. radial-gradient: blending from a center

radial-gradient() radiates outward from a center point. The default is a centered ellipse:

background: radial-gradient(red, blue);

You can control the shape (circle or ellipse), the size, and the position:

background: radial-gradient(circle at center, #f8fafc 0%, #6366f1 100%);
background: radial-gradient(circle at top left, red, blue 70%);

5. Repeating gradients

Wrap either function in repeating- to tile the pattern:

background: repeating-linear-gradient(45deg, #111 0 10px, #222 10px 20px);

With a zero-length stop (#111 0 10px) you get crisp stripes — handy for progress bars, placeholders, and diagonal accents.

6. Practical tips

• Keep contrast readable. If text sits on a gradient, check contrast at both ends — the darker stop usually decides legibility. Our contrast checker handles the math.
• Use to right over 90deg when the direction is obvious; it reads better in code.
• Overlay with rgba for depth: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)) over a photo darkens it evenly.
• Animate stops, not colors. Animating background-position on an oversized gradient is smoother than transitioning between two gradients.