This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to make a full background gradient on a website CSS

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_43

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi there, this video we're going to learn how to add a Gradient to the background of a website. We're going to make sure it goes all the way along. We're going to play with the direction. We're going to look at-- we're going to end up like this with a nice subtle gradient, but we're going to look at bad ones, we're going to show you where to get inspiration for gradients, different cool places, how to pick them from a website using a cool little plugin. If you think gradients are naff you can totally skip this whole video. It's like 10 minutes of life you can have back. If you are interested in gradients, listen on. 

To add a gradient it's pretty easy. We're going to do it to the Body tag, because that covers the whole background. We've got an existing color at the moment, let's delete that. So background color, imagine if we could just type in background-gradi-- oh, doesn't exist. Weirdly you use Background Image to do this. So Background Image, then you start typing in either Linear, so 'L', you can see at the top there, Linear Gradient, or 'R' for Radial Gradient. It's up to you whether you want a circle or a straight line. We're going to use a Linear Gradient. 

In the brackets here we type in two colors separated by a comma. It's going to do red and yellow, because you'll notice that when I start typing, it's not pre-filling in the colors like normal, just because it's a weird use case. I put it in, put in your closing semicolon, 'Save All'. Preview in the browser, and there it is, fiery. Don't worry that it stops here, we're going to talk about that in a second, but for the moment, that's it, Linear Gradient, by default it goes top to bottom. You can mess around with that by putting in a value just in front of red. You can either use like 90 deg, comma, so 90 degrees. Save it, and now it's going left to right, or there's some weird syntax, where you can do, it's kind of weird, it's kind of good. You can say 'to right'. 

Some of it is really weird, like, "Hey, you have to use this random background image to do a gradient", but then we're going to use this really sensible, like, I don't know, phonetically correct code. So that will do the same thing, so 'to right', 'to left', Let's have a look, it goes the other way around, it doesn't matter. You can use degrees, or that, whatever works for you. I'm going to leave it off, hardest one to go straight up and down. You can add more than one stop. So at the moment goes red to yellow, but we could say red to yellow to blue, but this kind of looks good. Boom. 

If you've used something like Adobe Illustrator, I feel like this is where they get ideas for default gradients, they're terrible in there. Anyway, there is more things you can do. I can never remember all the syntax for it. I've put a link in your text document, it's in your Project2 file, called Text. There's all the content that we've been using so far, I put that link in here, for w3schools.com. This has a really good explanation of all you can do. It gets lovely, look at it. Look, you can put in loads of colors. Just separate them, you can see here, just separate them from a color, sorry, with a comma. You can put transparency, you can do repeating stuff. I'm not going to cover it all because-- you might be looking for, I don't know-- wow, some good ones. So there are lots of different things you can do in here. Just have a read through to get what you need. Stop scrolling, Dan, you're making people dizzy. 

The other things I want to show you are, we're kind of getting my ideas for gradients, there's a couple of places, right? Grabient is a really good one, actually before we go into this-- because this-- you might not care about gradients, but you might care about where this thing stops. So a couple of things. This one stops here because our container finishes here, because it's quite a small website at the moment. It kind of just finishes there, and it's actually repeating. It's repeating down the background. We could try and add a no-repeat, but then you just have a different colored box down here. So the way to get around this is, I know, as I'm building the site it's going to get longer, and this will disappear. 

It's only there because my screen is really big. If I make it smaller, if you're using a smaller screen, you're probably not even going to have this problem. During this course, you're like, "Where is that problem?", but on some people's screens, like this one, it is a problem. So if I was building the site I just leave it, knowing that my website's going to get bigger, and it's not going to be a problem, because like, look, this is where we're going, right? This is the kind of that test version that I made, and because it's so big it goes all the way off the screen, and there's no point doing this next thing, but you might run into this problem, and all you need to do to fix it, is Visual Studio Code, and at the top here we're going to target our HTML tag. 

Remember, our HTML is the whole document, and then the body is everything the user sees. You can do stuff to the HTML. And this thing here, if I make the height 100%, I don't really know why this works, I just know that it fixes our problem. I see it loads when people are kind of like, "Hey, put a gradient on, put hide-in," nobody ever explains why, and I still don't know why, so, hey ho. Let's have a look. Back to our original. There we go, my spectacular gradient, the whole way along. So let's get away from naff colors, and let's look at where I get my kind of gradient ideas from. 

So a really nice place is called Grabient; grabient.com, and they just have really cool colors. You've got a bunch of pages, and you'll-- if you've done any of my courses, you'll probably see some of these, because I just use them as an idea, as a guide. I like this one here. So the way I get it into VS code, is, can you see down here, if I hover above this color, gives me that. I can click on it, say, you my friend, you come over with me. I'll grab the hash and everything, and all I need to do is replace red with that. 

This one here, copy and paste, so it's just pretty easy, right? Paste, and then I'll get rid of our blue; thank you, blue. Here you go, we got that gradient applied. So that's an easy way, They're fine, it's nice to see them in situ-- I'll show you a couple of places that I get, my inspiration in general for design, for Web Design, but also for colors. Two places I use, I use Dribbble; Dribbble, with three Bs, and Behance, which is Adobe's one. I go into here, either one of these, they're very different. For some reason, they're doing a similar job but they have a very different look, or type of users. So they have different kind of types of content. 

I've done a search on this for gradient. Just bring up some gradients, but you don't have to, but let's say-- you can kind of see, my feelings of gradients have come from just this type of work. This will change if you're watching in the future, and you 're like, "Gradients are so 2019, Dan," get out of here. That's fine as well, skip this whole video, but let's say you do like some of this, and you're like, "Oh, I really want to do something with a color," I'm just scrolling, scrolling, where are we, just picking what I like. Say you like some of this stuff in--

I'm just going to pick one in, go. I pick this one, see this orange to this other orange? I want to get those two colors, and it's hard to get out. If you know Photoshop and Illustrator you can do it easy. Do a screenshot, bring it in, use the Eyedropper tool. Not everyone's going to have those skills though, so in Chrome, Chrome has some cool stuff, where, in the browser, you can install something called an Extension. A really cool one is this, called FileZilla, but if you go to Chrome's Extensions, so just do a search for Chrome Extensions, and then while you're in there, search for Color Picker. 

A Color Picker is the general word for all of this. Find one that's got high values, high reviews, lots of downloads, and then say 'Install', and it just appears in the top right here. You can see my Color Picker, then I'll just go, 'Color Picker', pick color from page, and then I just move around until I-- can you see here? It's hard to do because my mouse is down here, but you, with your eyes, look up here. So look, there you go, I'm going to pick it. 

Awesome. And it just gets added up the top here to my Color Picker, and it also gets automatically copied to my clipboard. So all I need to do now is go into here and say, delete, paste, oops, everything, paste. So that's that orange. I'm going to pick a random color because if I pick something close to that pink, it's not going to be a good example, I'm just going to pick this dark kind of green in here. Click on it, let's copy to my clipboard, paste. 'Save', let's check out our site. Hey, cool. Undecided, but you get the idea, right? So Behance, just good for--

While you're in here, in terms of my, where I get ideas for Web Design, like building the topics for this class, I had to build a fake bicycle shop. Where do I get the ideas from? It's often UI Kit or UI Design User Interface, is often a good place to get ideas, colors, and schemes, structure. And yeah, use it for inspiration. Do the same thing on Dribbble. You might have your own place for getting cool ideas, but those are mine. 

So before we go we're going to add the proper gradients from our mock-up. Remember, it's this kind of, these colors. They are in your, they're in your text here, it's this one here, I copy and paste those in. And we'll move on, you can move on now. I paste them in, paste, save. Test document. If you are still like, "Hey, how does he do that jumping thing from one program to another?" I told you earlier on, but you might have forgotten. On a Mac, it's 'Command Tab', so hold down the Command key, just tap the Tab key, until you get to the right one, or you can point to it with your mouse and just let go of the keys. On a PC it's very similar, it's 'Ctrl Tab', or is it Alt-Tab, oh, PC, not sure, try both of them. Let's have a look, have we got our lovely rich color? We do. Just a subtle gradient, not too much. 

All right, that is going to be it, I will see you in the next video.