CSS gradients: basic to advanced

“All that’s bright must fade, the brightest still the fleetest; All that’s sweet was made but to be lost when sweetest.” ― Thomas Moore

It used to be when you wanted a nice simple gradient background for your page, the process looked like this: Step 1) fire up Photoshop; Step 2) use the Gradient tool to fill the canvas with a horizontal or vertical gradient; Step 3) crop canvas into a as-small-as-possible slice (often 1px high or 1px wide); Step 4) export .gif or .jpg graphic; and so on. I’m leaving off the rest of the steps, because you either remember how to do it from past experience, or you’ll never need to know how to make a gradient that way thanks to the awesomeness of CSS gradients. Let’s take a look at what they can do!

Browser Support

Most major browsers have had full support for CSS gradients for over two years now. Depending on how you’re using gradients it may be fair to consider them a progressive enhancement, and just declare a solid color background as the default for older browsers. Or you can use an background image as a fallback if needed, just like we used to do back when we wore onions on our belts.

Basic CSS Gradients: Linear and Radial

A simple linear CSS gradient, from #999 to #000;
A simple linear CSS gradient, from #999 to #000;

First let’s look at the basic 2-color linear gradient. This is going to create a gradient in a div‘s background that fades from grey (#999) at the top to pure black (#000) at the bottom.

[css]
div{
/* fallback for old browsers */
background: #000;
/* simple linear gradient */
background: linear-gradient(#999, #000);
}
[/css]
An angled linear CSS gradientThis is a very simple example that works in nearly all modern browsers, you can see that it defaults a vertical gradient that runs from top to bottom. Checking the official syntax, you can see that by adding in the first gradient-line argument you can switch it from a vertical to a horizontal gradient, or any other angle you choose. Here’s an angled gradient, running from top-left (#fff) to bottom-right (#000):

[css]
div{
/* gradient from top-left to bottom-right */
background: linear-gradient(135deg, #fff, #000);
}
[/css]
From the W3C: “For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.”. So the bottom-right corner in this case is 135deg.

A simple radial CSS gradientNow let’s look at the basic radial gradient. The syntax will be nearly identical to the first linear gradient example, except that it will use radial-gradient and instead of running from top to bottom by default, it will run from the center to the outside edge.

[css]
div{
/* gradient from center to outer edge */
background: radial-gradient(#999, #000);
}
[/css]

Get the full radial-gradient syntax here, and note that radial gradients default to elliptical shape, meaning that they will stretch to the width and height of the element they are applied to, but you can force the gradient to be circular using the circle keyword.

Intermediate Gradients: Transparency, Multiple Color Stops, and Repeating

Fade to transparent using hsla()
Fade to transparent using hsla()

The examples above show solid colors, but CSS gradients also accept rgba and hsla values, allowing for alpha transparency (here it allows the body background-image to show through):

[css]
body{
/* body background img via http://subtlepatterns.com/ */
background-image: url(http://themarklee.com/wp-content/uploads/2013/11/fake_luxury.png);
}
div{
/* fade gradient to transparent (0 alpha) */
background: linear-gradient(hsla(300, 50%, 50%, 1), hsla(300, 50%, 50%, 0));
}
[/css]

Rainbow linear CSS gradientWe’ve also only done 2-color gradients up until now, but CSS gradients support multiple colors, so for example you can make a rainbow gradient like so:

[css]
div{
/* we can declare multiple colors, which will be evenly spaced by default */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
[/css]

Rainbow linear CSS gradient with color stopNow say that we want to tweak the rainbow a little bit, for example so that violet is much larger thatn the other colors. This is where “color stops” come in. A color stop is a way of saying “I want the gradient to be this color at this point.” The code snippet below will make the color violet appear by 50% of the way through, compressing all the other colors into the first half of the gradient.

[css]
div{
/* here we set a color stop of 50% on violet */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet 50%);
}
[/css]

Striped CSS gradientYou may have noticed that all of these examples stretch all the way from one edge of the element to the other. Now what if you want to define a pattern that repeats across the element? Instead of using the linear-gradient or radial-gradient properties you will want to use repeating-linear-gradient or repeating-radial-gradient. In the example below we will use repeating-linear-gradient with a number of color stops to create a diagonal striped pattern.
[css]
div{
background: repeating-linear-gradient(135deg, red, red 5px, white 5px, white 30px);
}
[/css]
This translates to English roughly as “start at the top left (135deg) with the color red, then we want it red at 5px, then white starting at 5px (setting the red to end and the white to begin at the same spot gives us a nice crisp edge), then white until 30px, at which point the gradient starts over”.

Circular repeating radial gradientHere’s an example of a repeating-radial-gradient following the same idea, except we use “circle” instead of “135deg”:

[css]
div{
background: repeating-radial-gradient(circle, red, red 5px, white 5px, white 30px);
}
[/css]

Advanced Gradients: Multiple Backgrounds for Fancy Patterns

A gradient pattern using multiple CSS backgroundsBy combining several of the above techniques, and using multiple backgrounds (browser support chart), you can make some fairly advanced patterns.

The code below might look pretty complicated, but we are really just stacking up multiple layers that combine repeating, multiple color stops, and transparency to achieve the desired effect. The CodePen demo below shows each of the repeating-linear-background properties being layered in.

[css]
div{
background-color: #000;
background-image:
repeating-linear-gradient(transparent, transparent 50px, rgba(0,255,255, .25) 50px,rgba(0,255,255, .25) 100px),
repeating-linear-gradient(90deg, rgba(0,255,255, .25), rgba(0,255,255, .25) 50px, transparent 50px, transparent 100px),
repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px),
repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px),
repeating-linear-gradient(transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px),
repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px);
}
[/css]

This CodePen demo shows visually how the various backgrounds are layered.

Check out this Pen!

And here’s the finished pattern in editable CodePen form:

Check out this Pen!

Ninja-level Gradients

For some super-advanced and beautiful examples of what CSS gradients can do, check out the CSS3 Patterns Gallery from Lea Verou and contributors. (UPDATE) Also see the Beautiful Repeating Patterns collection by Chris Coyier.

References, Resources, and Tools

2 Replies to “CSS gradients: basic to advanced”

  1. Hi
    Regarding: background: linear-gradient(135deg, #fff, #000);
    Thinking “So the top-right corner in this case is 135deg.” must be bottom right corner.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.