Locked lesson.

Upgrade

About this lesson

Using Gradients with nothing more than CSS (no images needed).

Exercise files

Download this lesson’s related exercise files.

Gradients.docx
58.8 KB Gradients - Solution.docx
59.3 KB

Quick reference

Gradients

We can create linear and radial gradients.

When to use

Any time you want a multicolored gradient effect.

Instructions

To create a basic linear gradient of two colors:

#gradient {
    background: black;
    background: -webkit-linear-gradient(#cccccc, blue);
    background: -o-linear-gradient(#cccccc, blue);
    background: -moz-linear-gradient(#cccccc, blue);
    background: linear-gradient(#cccccc, blue);
}

To create a linear gradient with three colors:

#gradient {
    background: black;
    background: -webkit-linear-gradient(#cccccc, blue, yellow);
    background: -o-linear-gradient(#cccccc, blue, yellow);
    background: -moz-linear-gradient(#cccccc, blue, yellow);
    background: linear-gradient(#cccccc, blue, yellow);
}

To create a linear gradient from left to right: 

#gradient {
    background: black;
    background: -webkit-linear-gradient(left, #cccccc, blue);
    background: -o-linear-gradient(right, #cccccc, blue);
    background: -moz-linear-gradient(right, #cccccc, blue);
    background: linear-gradient(right, #cccccc, blue);
}

To create a linear gradient diagonally:

#gradient {
    background: black;
    background: -webkit-linear-gradient(left top, #cccccc, blue);
    background: -o-linear-gradient(bottom right, #cccccc, blue);
    background: -moz-linear-gradient(bottom right, #cccccc, blue);
    background: linear-gradient(bottom right, #cccccc, blue);
}

To create a radial gradient of three colors:

#gradient {
    background: black;
    background: -webkit-radial-gradient(#cccccc, blue, yellow);
    background: -o-radial-gradient(#cccccc, blue, yellow);
    background: -moz-radial-gradient(#cccccc, blue, yellow);
    background: radial-gradient(#cccccc, blue, yellow);
}

Hints & tips

  • Gradients can be linear or radial
  • Gradients can have 2 or more colors
  • You can easily change the direction of the gradient
  • You have to write the CSS a little differently for each of the web browsers
Login to download
  • 00:05 In this video, I wanna talk about gradient backgrounds.
  • 00:08 Now, we've already touched on regular backgrounds, solid colors, but
  • 00:11 you can actually have gradients too.
  • 00:13 And a gradient is usually more than one color, usually two colors, but
  • 00:17 it can be more than two.
  • 00:18 And it's sort of slightly shifts from one color to the next.
  • 00:22 And it's a really nice effect, and you can do it in CSS.
  • 00:24 Now CSS has two basic gradient types.
  • 00:27 There's a linear gradient and a radial gradient.
  • 00:29 And a radial sort of comes out of the center circularly,
  • 00:33 sorta like a sun radiating out from the center.
  • 00:36 And a linear gradient goes up to down, down to up, left to right,
  • 00:40 or diagonally, so those are the two main types of gradients.
  • 00:44 And like in the last video,
  • 00:45 we have to write our CSS code slightly differently for the different types of web
  • 00:49 browsers cuz all the web browsers support this feature a little bit differently.
  • 00:53 So to do that, come back to our CSS, and I'm just gonna create a gradient ID.
  • 00:58 And let's go background and let's say, I don't know, let's just say black.
  • 01:04 Now, to create our gradients, we need to go background.
  • 01:09 And then give this a -webkit-linear-gradient,
  • 01:14 and let's start with our silver, cccccc, that's our first color.
  • 01:21 And then, let's go blue for our second color.
  • 01:24 So now we need to do the same thing for Safari.
  • 01:26 So background: -o-linear-gradient,
  • 01:32 and we'll go the same thing, cccccc, and blue.
  • 01:38 And then we need to go for Opera,
  • 01:42 background: -moz-linear-gradient.
  • 01:47 And again, cccccc, and then let's go blue.
  • 01:52 Finally, we need to go for Firefox.
  • 01:56 Background linear-gradient, and
  • 02:00 let's go cccccc, blue.
  • 02:04 Okay, so that's the CSS.
  • 02:07 Now, we just need to go div id="gradient"-This is some text...
  • 02:16 Save this, come back, hit reload.
  • 02:20 And we get this, this is some text.
  • 02:22 Now, we can come back here, and let's say give this a padding of 30 pixels.
  • 02:29 Save it, increase a little bit.
  • 02:32 So you see what we have our cccccc, our silver,
  • 02:35 and it slowly gradiates down to the blue.
  • 02:38 So we can change this to left to right, we just come up here and go left, and
  • 02:43 then oddly enough, for the rest of them, we have to go right.
  • 02:52 Save this, hit reload, boom, then we get left to right.
  • 02:56 For diagonal, we can come back here and change this to
  • 03:02 left top, and then change all the rest of them.
  • 03:07 We're gonna do the opposite, so bottom right.
  • 03:11 And I'm just gonna, actually I could just copy this,
  • 03:17 paste, paste, save this.
  • 03:21 It's kinda hard to see but it's diagonal now.
  • 03:23 We can do a multi-color by getting rid of all of these things.
  • 03:30 And then adding another color, Save this, come back and reload.
  • 03:40 So that's pretty ugly.
  • 03:42 And finally we can do radial, I just come back here and
  • 03:46 changing linear to radial for all of these.
  • 03:49 And generally with radial, you need three colors.
  • 03:51 So if we come back here, we'll navigate this radial.
  • 03:54 See, it's radiating out from the center, so that's cool.
  • 03:57 So that's gradients,
  • 03:57 you can play around with these, you can do all kinds of weird stuff.
  • 04:00 There's so many different options,
  • 04:02 there's too many things to show you in one little video.
  • 04:04 But if you do a little research, you can see all the different types of gradients,
  • 04:07 you can use transparency instead of a color, and do all kinds of cool stuff.

Lesson notes are only available for subscribers.

Gift this course