Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Gradient Colors

A “gradient” is a transition from one color to another. Gradients can also go through several color transitions.

You used to need images to have a gradient effect, but gradients can now be accomplished using CSS. Using gradients rather than images will often result in a faster load time and reduced bandwidth usage for your pages.

The “bonus” to using CSS is that if someone zooms in on the page, the gradient will usually look better because it’s regenerated by the browser rather than being an image that magnified by the browser.

There are two types of gradients: linear and radial. Linear gradients can run horizontally, vertically, or diagonally. Radial gradients “radiate” outward from the center (default) or from a point that you define.

First let’s look at a simple two-color gradient…

Two-Color Gradient

Of course, there are all sorts of variations to those colors in between the two color stops.

While pure CSS will work for modern browsers, we can include vendor codes for older browsers. We can (and should) also set a solid background color for older browsers. To keep the example codes as short as possible, we’ll look at using CSS only until the end, where I’ll explain the vendor codes.

Here’s the CSS for that example as it would be written in an external style sheet.

div.gradient {
  background: orange;
  background-image: linear-gradient(purple, orange);
}

Line 1 established a division class named gradient so we can add the class name to any division where we want the gradient background color. [ Tutorial: CSS Class Names ]

Line 2 sets a solid background color for browsers that can’t parse CSS gradients.

Line 3 sets the gradient. As you can see, we used a linear-gradient and set two colors stops. The color stops should be placed inside parenthesis brackets and separated by a comma.

You can add more color stops by simply adding more colors inside the parenthesis brackets on the third line and separating them with commas. You can also use hex colors rather named colors. You can use RGB colors as well, but the syntax is different—more on that later.

Change the Gradient Direction

There will be more examples coming, but first here's the code for the example to the left.

div.gradient {
  background: wheat;
  background-image: linear-gradient(to right, wheat, seagreen);
}

• to right
• to left
• to top
• to bottom

Gradient Angles

The gradient will start at the corner opposite of the direction you set. In other words, in this example because I set the direction to the top right, the gradient starts at the bottom left. Here are the diagonal direction options:

• to top right
• to top left
• to bottom right
• to bottom left
• (x)deg

With the last item, replace (x) with an actual number. For example: 52deg or -29deg (deg is short for degrees). This allows you to run the gradient at any angle instead of 45 degree increments.

div.gradient {
  background: lightskyblue;
  background-image: linear-gradient(to top right, lightskyblue, darkcyan);
}

If you use degrees, do not include the "to" part as you do with directions. In other words, you write (129deg, color1, color2) in the parenthesis brackets, rather than "to 129deg" for the direction. Here's this code:

div.gradient {
  background: seashell;
  background-image: linear-gradient(129deg, seashell, darkslategray);
}

Multil-Color Gradient

In theory you can have as many colors as you want in your gradient, but in practice the smaller the space you're applying the gradient to, the fewer the number of colors you can use and still have it look good. The code:

div.gradient {
  background: seashell;
  background-image: linear-gradient(green, palegreen, burlywood, black);
}

Transparency

CSS3 also supports transparency. Here's an example, sort of...

Maybe I'm just a big ol' dummy. Anyway, here’s the CSS:

div.gradient {
  background: rgb(224, 112, 46);
  background-image: linear-gradient(to right, rgba(43, 87, 29, 0), rgba(147, 209, 88, 1));
}

The second line is the same as the previous example up to the point where the two color stops are named. At that point, the standard RGBa colors are named. See the RGB Colors tutorial linked above to learn more about RGB and RGBa colors.

Note that RGBa colors are enclosed in parenthesis brackets, and because the color stops themselves are enclosed in parenthesis brackets, the second line ends with two consecutive right parenthesis brackets—that is not a mistake. The first one ends the RGBa color for the second color stop, and the second one ends the entire color stop segment. It might look weird, but it’s not if you think about it.

Are you finished thinking about it yet? We could move on now…

Repeating Linear Gradients

Can you guess why the gradient stripe repeats five times?

Answer: The name is the clue, color stops. The farthest color stop is at 20% of the containing element. Background images repeat until they fill the available space unless they're coded not to, which this wasn't, so 20% goes into 100% five times (100 divided by 20 = 5), so the pattern is repeated 5 times. Here's that code:

div.gradient {
  background: gray;
  background-image: repeating-linear-gradient(to right, #000, #8F8F8F 10%, #515151 20%);
}

Plain Old Stripes

See the first two color in the code below? They’re the same color. The third and fourth color are also the same color. That creates the two colors. If you want to be creative you can add more colors and color stops.

Now notice the distance for the second and third color stop. They’re both the same, 5 pixels. That creates the sharp edges rather than the fade from color to color.

div.gradient {
  background: orange;
  background-image: repeating-linear-gradientto right, #FA0, #FA0 5px, #FC7 5px, #FC7 10px);
}

If you don't want the stripes to be the same width then make the last color stop either more or less than the total distance of the 2nd and 3rd color stops. The first two are 5 pixels, so if you make the last one 15 pixels or some other number besided 10, the stripes will not be the same size.

Radial Gradients

Oh look, here’s an example now!

By default, a radial gradient starts in the center of an element and radiates outward. It will be circular or elliptical depending on the shape it's filling (square or rectangle, respectively).

By default, the first color named will be in the center of the gradient, with each successive color radiating toward the edges. The last color named will typically fill the corners.

Here’s the code for that radial gradient example:

div.gradient {
  background: yellow;
  background-image: radial-gradient(aliceblue, burlywood, brown, black);
}

In the above example, the colors are divided up more or less evenly within the containing element. As with linear gradients, we can change that to our liking by specifying a width in pixels or percentage for the color stops.

Here's the code:

div.gradient {
  background: yellow;
  background-image: radial-gradient(aliceblue 5%, burlywood 15%, brown 60%, black 75%);
}

You can have a hard line from one color to the next by making two consecutive colors have the same color stop percentage.

You can also reposition the center point of the radial gradient. It begins with choosing which part of the containing element the new position is measured from. The options are:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

In that example, shown below, the center point would 58 pixels from the left edge and 42 pixels from the top.

Using closest-side and farthest-side, the gradient radiates outward directly toward the top and sides. The gradient stops when it reaches the closest or farther side.

If closest side is used, when the gradient reaches that side, it stops “radiating” toward the farthest side, leaving the last color to fill the extra space. If the farther site is used, the gradient will exceed the edge of the closest side. The part that exceeds the edge doesn’t show, but it makes the gradient appear bigger than the containing element. That can be a nice option, depending on the look you want.

Using closest-corner or farthest corner the gradient radiates outward toward the farther corner from the center point or the closest corner to the center point, depending on which one you choose. As with the farthest-side option, part of the gradient will run out of view, making the gradient seem bigger than the containing element. Here's the code for that one:

div.gradient {
  background: yellow;
  background-image: radial-gradient(farthest-side at 58px 42px, sienna, burlywood, brown);
}

Repeating Radial Gradient

By the way, this looks smoother at larger sizes.

Here’s the code for that final example:

div.gradient {
  background: yellow;
  background-image: repeating-radial-gradient(black, sienna 24%, darkred 26%);
}

That was a doozy!