Check out a free preview of the full CSS In-Depth, v2 course:
The "Gradient Demos & Overview" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle demonstrates different gradient combinations as a way of overview of the types of gradients. She then looks at conical gradients, which will be available in the future.

Get Unlimited Access Now

Transcript from the "Gradient Demos & Overview" Lesson

[00:00:02]
>> Estelle: Now we're gonna go on to CSS Gradients. So here are some examples of some gradients, some of them are based on my old house wallpaper. But just to show that they're gradients and that they're live, we're going to hideously change the background color. And so you see that this is actually a gradient, cuz I was able to change the background color, and it went through.

[00:00:28] This is one I called Metal Grid.
>> Estelle: And
>> Estelle: There we go.
>> Estelle: This one actually as ugly as it is, if you chose the right color, it actually kind of looks nice. So this wouldn't be the most hideous of background images if you wanted to create a gradient and have the page repeated.

[00:00:59] This one I call disco ball, cuz there's like a radio gradient in the background and then there's like these hideous balls in the front. I'm just moving the slider to show that these are live and it's not some image I put back there. This one I call the star of David, I guess the most appropriate would be to make it white and blue.

[00:01:22] And then this one is retro 1967, cuz why not? And this one reminds me of seat cousins, if you've ever had a seat cushion with a little pin in the middle, but you can pick a seat cushion in any color you want. There you go, let's blind ourselves.

[00:01:42] And this one is actually based on wallpaper that was in my house, except for, the color of my wallpaper was more, yeah, that's it. That's nice, and when you would be in the house for a really long period of time, it would feel like you was doing this.

[00:02:04]
>> Estelle: Yeah, so these are all done with gradients, and then background size, which we've learned background size, right? So a gradient is actually an image, and it can be used anywhere where you use an image in CSS. So it can be used in generated content, it could be used as a background image, and it could be used as a list item image as well.

[00:02:30] So it's actually not just background images, but 99.999% of the time that's what you do. Generally there are considered to be four types of gradients, there's linear, repeating linear, radial, and repeating radial gradient. I guess you can actually put it as a cursor, you could put a gradient as a cursor, I forgot that there's an image cursor.

[00:02:56]
>> Estelle: If you want to see this one, you have to go into Chrome, Canary, which I will do here. And here we have conical gradients.
>> Estelle: So coming soon, because it is actually from Canary which is the build, or the beta version, with just a few lines of CSS I was able to create this conical gradient.

[00:03:28] We are not gonna cover conical gradient, because it's gonna be a while before the fully covered. But just realize that this is something that is coming and it'll be doable, and it makes it really easy to do something like that.
>> Estelle: CSS gradients, i's all green, Opera Mini will forever be red.

[00:03:50] And it's not that Opera Mini is a bad browser, Opera Mini is actually a very good browser. It's very good if you have very limited bandwidth, or you're paying a lot for your bandwidth, because what it does is it basically on Opera's servers, they create the page for you, and then they send you just a few HTTP requests, they send you the produced pages.

[00:04:10] So it strips out a lot of stuff, and provides you with content that's linkable. But a lot of the features, aren't supported, because someone who is paying money to surf the web does not want to be paying for extra junk, okay. And it's also on older devices, and more modern devices, but It's basically a money saver.