CSS Linear Gradients

A gradient is an image made by CSS. You use it where an image is allowed, mostly background or background-image.

1
2
3
4
5
6
7
8
9
10
11

<style>
  .g { height: 70px; margin-bottom: 8px; border-radius: 8px; color: #fff; padding: 8px; font-size: 13px; }
  .a { background: linear-gradient(#d94a00, #1a5276); }
  .b { background: linear-gradient(to right, #d94a00, #f5b041); }
  .c { background: linear-gradient(135deg, #1a5276, #27ae60, #f5b041); }
  .d { background: linear-gradient(90deg, #d94a00 0 33%, #1a5276 33% 66%, #27ae60 66%); }
</style>
<div class="g a">top to bottom (default)</div>
<div class="g b">to right</div>
<div class="g c">135deg with three colors</div>
<div class="g d">hard stops: stripes</div>

Direction

• Keywords: to right, to bottom, to bottom right.
• Angles: 90deg points right, 180deg points down, 45deg toward the upper right.

Color stops

List two or more colors. They are spread evenly, or you can place them with a position: #d94a00 20%, #1a5276 80%. The color is solid up to the first stop and after the last.

Two colors at the same position make a hard edge, like the stripes above. #d94a00 0 33% means “this color from 0 to 33%”.

Fading to transparent

A gradient from a color to transparent is a classic way to make text readable over a photo:

1
2
3

.hero-text {
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}

Layering with images

Gradients can be stacked with other backgrounds. See Multiple Backgrounds.

1
2
3
4
5

.hero {
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url("hero.jpg") center / cover;
}

The first layer, a plain dark gradient, tints the photo under it.