References

Beginner-friendly references for web development, with live, editable examples.

The CSS linear-gradient() function

Function CSS All modern browsers Updated
Quick answer

The CSS linear-gradient() function makes a smooth color transition you use as a background image, e.g. background: linear-gradient(135deg, #1c7ce9, #6d28d9). Set the angle (or a keyword direction like to right) first, then list the color stops. Because it produces an image, it belongs in background, not background-color.

Overview

linear-gradient() generates an image — a band of color that fades from one stop to the next along a straight line. You hand it a direction and a list of colors, and it paints the blend.

The first argument is the direction: an angle like 135deg (0deg points up, angles go clockwise) or a keyword like to right or to bottom right. After that come the color stops, two or more, optionally with positions: linear-gradient(to right, #1c7ce9, #6d28d9). Give a stop a hard position pair, like red 0 50%, and you get a crisp edge instead of a fade — handy for stripes.

Because the result is an <image>, it lives in background or background-image, never background-color. You can stack several gradients, and a translucent gradient layered over a photo is the standard trick for keeping overlaid text readable. Its relatives radial-gradient() and conic-gradient() work the same way for circular and swept blends.

Syntax

selector {
  background: linear-gradient(135deg, #1c7ce9, #6d28d9);
  /* or a keyword direction */
  background: linear-gradient(to right, #06b6d4, #3b82f6);
}

Example

Live example 
<style>
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font: 700 14px system-ui, sans-serif; color: #fff; text-align: center; }
  .row div { padding: 28px 12px; border-radius: 10px; }
  .g1 { background: linear-gradient(135deg, #1c7ce9, #6d28d9); }
  .g2 { background: linear-gradient(to right, #06b6d4, #3b82f6); }
</style>
<div class="row">
  <div class="g1">135deg</div>
  <div class="g2">to right</div>
</div>

Best practices

  • Remember it is an image — apply it via background or background-image, not background-color.
  • Layer a translucent gradient over a photo (linear-gradient(rgb(0 0 0 / 0.5), transparent), url(...)) so overlaid text stays legible.
  • Use positioned stops like #1c7ce9 0 50% for hard-edged stripes instead of a smooth fade.
  • Keep gradients subtle for UI surfaces; loud, high-contrast gradients date quickly.

Frequently asked questions

How do I create a gradient in CSS?
Use linear-gradient() as a background, e.g. background: linear-gradient(135deg, #1c7ce9, #6d28d9). List a direction, then the colors.
How do I set the direction of a gradient?
Start with an angle like 135deg or a keyword like to right or to bottom left, e.g. linear-gradient(to right, red, blue).
Why is my gradient not showing?
A gradient is an image, so it must go in background or background-image. It will not work as a background-color.
How do I put text over a gradient and an image?
Stack layers: background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(photo.jpg). The gradient tints the image so the text stays readable.
hsl() max()