CSS Linear Gradient Tutorial: Angles, Directions, and Color Stops

Linear Gradients Are the Workhorse

Of all CSS gradient types, linear-gradient is the one you will reach for most often. Buttons, hero sections, card backgrounds, overlays — linear gradients handle them all with a single line of CSS.

This tutorial focuses exclusively on linear-gradient syntax so you can master every angle, stop, and pattern it supports.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...);

The direction tells the browser which way the gradient flows. The colors define what appears along that axis.

/* Default: top to bottom */
background: linear-gradient(#3B82F6, #8B5CF6);

/* Explicit direction */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

Angles vs. Direction Keywords

You can specify direction in two ways — keyword or angle.

Direction Keywords

Keywords are readable and cover the basics. But they limit you to 45-degree increments.

Degree Angles

Angles give you full 360-degree control. Think of the gradient line as a compass:

• 0deg — bottom to top
• 90deg — left to right
• 180deg — top to bottom
• 270deg — right to left

/* Diagonal — precise control */
background: linear-gradient(137deg, #3B82F6, #8B5CF6);

The angle rotates the gradient line clockwise. When you need a direction between keyword increments — like 137deg — only the angle syntax works.

Which Should You Use?

Multi-Stop Gradients

Add more than two colors to create rich, layered backgrounds.

/* Three stops — evenly spaced */
background: linear-gradient(to right, #EF4444, #F59E0B, #10B981);

/* Four stops with positions */
background: linear-gradient(
  to right,
  #3B82F6 0%,
  #8B5CF6 33%,
  #EC4899 66%,
  #F43F5E 100%
);

Position Rules

• If you skip positions, the browser distributes stops evenly
• You can use %, px, em, or any CSS length unit
• Positions can go in any order — the browser sorts them
• Two stops at the same position create a hard edge

/* Hard edge transition */
background: linear-gradient(to right, #3B82F6 50%, #8B5CF6 50%);

Hard-edge stops are the building block for stripe and checkerboard patterns.

Color Hints (Midpoints)

By default, the browser places the midpoint of a transition exactly halfway between two stops. A color hint lets you shift that midpoint.

/* Normal — midpoint at 50% */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

/* Shifted midpoint — transition happens sooner */
background: linear-gradient(to right, #3B82F6, 25%, #8B5CF6);

The 25% is the color hint. It tells the browser "the 50% blend of these two colors should appear at 25% of the gradient." This creates a faster initial transition and a slower tail.

Color hints are subtle but powerful. They let you control the perceived weight of each color in the gradient.

Transparency Gradients

Combine solid colors with transparent or alpha-channel colors for fade effects.

/* Fade out at the bottom */
background: linear-gradient(to bottom, rgba(59, 130, 246, 0.9), transparent);

/* Modern syntax with slash alpha */
background: linear-gradient(to bottom, rgb(59 130 246 / 0.9), transparent);

Use transparency gradients when you need an overlay that gradually reveals or hides content — hero images, image captions, or loading shimmer effects.

Gradient Over Background Images

You can layer a gradient on top of a background image using multiple background values.

.hero {
  background:
    linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7)),
    url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
}

The gradient sits on top because it comes first in the comma-separated list. This technique keeps text readable over complex images without a separate overlay <div>.

Stripe Patterns with Repeating Gradients

repeating-linear-gradient tiles the gradient infinitely. Combined with hard-edge stops, it creates stripe and pattern backgrounds.

Horizontal Stripes

background: repeating-linear-gradient(
  0deg,
  #3B82F6 0px,
  #3B82F6 4px,
  transparent 4px,
  transparent 8px
);

Diagonal Stripes

background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  #1E3A5F 10px,
  #1E3A5F 20px
);

Checkerboard

background:
  repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 2px,
    transparent 2px,
    transparent 8px
  ),
  repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 2px,
    transparent 2px,
    transparent 8px
  );

Layer two repeating gradients at opposite angles to build a checkerboard. Each gradient contributes one set of diagonal stripes — together they form a grid.

Debugging Tips

Gradients can look wrong for subtle reasons. Here is a quick checklist:

Browser DevTools

Chrome and Firefox DevTools let you edit gradients visually. Click the gradient swatch next to the CSS value to open a picker where you adjust angles and stops in real time.

Key Takeaways

• Use degree angles when keywords are not precise enough
• Multi-stop gradients with explicit positions give you full layout control
• Color hints shift the midpoint of a transition for weighted color distribution
• Transparency gradients create overlays and fade effects without extra markup
• repeating-linear-gradient with hard-edge stops produces stripes and patterns
• Always test gradients against both light and dark backgrounds

Try It Yourself

Experiment with angles, directions, and color stops in our CSS Gradient Generator. Need to convert colors for your stops? Use the Color Converter to switch between HEX, RGB, and HSL.

Related Guides

• CSS Gradient Guide — Overview of all gradient types including radial and conic
• CSS Design Tips — Combine gradients with shadows and color theory for polished interfaces