This is Sasha and welcome to another CSS training video where I share with you how to modify and manipulate your business website with CSS. It’s also great if you’re learning CSS. Now today, we’re going to take a look at the gradient property and let’s take a look at how it works when it comes to a linear gradient then we’ll maybe touch base a little bit on radial gradients as well.
Here if we take a look at our page, I’m going to start the gradient items just right under this CSS code or the comment. All I’ve done is create a primary div in the HTML that has a standard box.
Usually, you want to have multiple properties when it comes to gradients. Just because not every browser supports it and in fact because of this reason, you have you write multiple lines of code and also have a backup version. For browsers that do not support it, you just put in your standard background whether that’s red, green, yellow, blue, it doesn’t matter.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: linear-gradient(red, yellow); /* Standard syntax */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
}
For other browsers, what you typically will do is do something along this line. Here’s our standard syntax, okay? We have a background of a linear gradient, and all we need to do is type in red, we add a comma from one color to the next color. In this case, we’ll do red to yellow, and you can see it’s a top-down approach.
That’s how it does the filling. Now, you can change this which I’ll show you here in a minute. But first thing and that’s important to understand is that for other browsers. For example, for Safari 5.1 to 6, you’ll want to use this syntax right here, the webkit then you also have the Opera. Some of the other versions right there with that -0- linear gradient and then again red to yellow and then the Mozilla Firefox again you’ll want to use that syntax.
In theory, just to put on a gradient, you need four background elements and four background properties to hit all the browsers, but in reality, you need five to be able to substitute this backup.
To have a background, you almost need five lines of code. Whatever line of code that you’re working on, let’s say, even though I’m testing my browser in Chrome which will define for the standard syntax because I could go right here from green to let’s say blue and I go ahead and hit refresh, let’s just take a look, okay, and green, green, green, we’ll go blue, blue, blue, refresh and let’s only see and there you go.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: linear-gradient(green, blue); /* Standard syntax */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
}
You can see this tends to work out just fine from me without a problem and I’m not sure which one it’s hitting, I believe it’s hitting this background gradient green to blue but in all else let’s put this at the very top and set a standard one there. Let’s double check, pink to blue, there we go, yeah. The standard syntax I put at the bottom so that way it takes precedence of what’s going to happen.
What you want to do is you always have the decent versions and variations just in case the browser doesn’t support the gradient. Now, all the changes that I’m going to be playing with right here, you can also make within all these other versions, but I’m not going to make changes to all three of them.
In either case, what you want to do is, let’s say, you want to fade it from one color to the next, what I could do is include RGB A values and these typically use RGB A or RGB values. Instead of pink to green or pink to blue, I could type in something like RGB and then put in my value and let’s say I want it to go to like a greener tone or greener color.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(234, 226, 138), rgb(191, 221, 119)); /* Standard syntax */
}
I’ll go ahead and do this, and I’ll pop that in there right there. You could see I have multiple parentheses right there. I’m not sure if it’ll need the alpha as well but let’s take a quick look. You can see no, it does not. You can see I’m creating a nice little yellow to green fade right there which is good for buttons and things like that.
This is a top-down approach, but you could also do the gradient from left to right. Now, I’ll give you one point to keep if you wanted to make sure this was also done on Safari and Opera and Firefox, you’d have to copy the same code pretty much and replace these right here at the ending. Okay, just – so that way it’s targeted all the different browsers.
The other thing to keep in mind when it comes to gradient is that you could include multiple colors. If I wanted to fade to this kind of green, I could add a third value, and it depends if I want it more in the middle or at the bottom.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(234, 226, 138), rgb(191, 221, 119), rgb(100, 186, 140)); /* Standard syntax */
}
I’m just going to go ahead at the bottom since it’s a little darker and now you can see it’s creating that effect right there, and again it’s going top to bottom. If I want it to go from left to right then at the beginning, what I could do is go to left, add a comma, and you can see it’s going left to right.
If I want it to go to the right, you can see I switched it that way to down. Let’s see, if that one works – nope, it will be to bottom, okay, let’s see. There we go, to bottom and top. Let’s see if the top one works. Yup.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgb(234, 226, 138), rgb(191, 221, 119), rgb(100, 186, 140)); /* Standard syntax */
}
There you go, those are the variations. Now, the other way you could do is you could do it at an angle or degree so if I go, let’s say, 35 and I do D-E-G. You can see it’s at a 35 degree or I could do, let’s say 175 degrees. You can see it kind of makes that change.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(225deg, rgb(234, 226, 138), rgb(191, 221, 119), rgb(100, 186, 140)); /* Standard syntax */
}
How about 275 degrees? You’re making these changes, 225, so you can see how it’s moving along those premises. The other thing that you can do is also do something along the lines of where it starts from so you can define how far down it goes on the gradient.
Let’s say I have this one, and let’s just remove this degree because you could do it with degrees but to illustrate the example, so you’re not too confused, let’s just go back to two of these, so I’ll go from a lighter color to a darker color so there’ kind of our gradient right there.
What could I also include here is a starting point and in this case what I’m going to do is say 20%, and you can see it starts now, it goes up to the 20% and then the next color goes. If I do 50%, you can see it goes up that halfway mark. If I do 70%, you can see it goes right there. 70% of it is that yellow color.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(234, 226, 138) 70%, rgb(100, 186, 140)); /* Standard syntax */
}
Then the other way I could add in is the second color if I want a split without the gradient, I could do this at a 30% and you can see it creates a nice little box effect or button effect which is also another way that people go ahead and add like a bit of bottom button there on the rollover or something along those lines. You could do something like that where you’re creating or even, let’s say, 8% like a nice little fade.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(234, 226, 138) 70%, rgb(100, 186, 140) 30%); /* Standard syntax */
}
Maybe you won’t be able to see it so let’s go 80% right there and maybe 5%. Anyways, there are better ways to do that, but I think you get the idea of how this ultimately works out with the percentages right there. I’m creating like a little fade there that creates that gradient.
That’s how you do it. That’s how you create gradients. As far as radial gradients are concerned, you have to remember that the radial gradient starts from the center and work their work out. If I go ahead and make the change here instead of a linear gradient, I change it to a radial gradient.
You can see it right there what it does. Now, let me get rid of this 80% right here, and you can see, there’s our radial gradient. It looks nice, you know. The concepts are very similar to that of a linear gradient. It’s just that it starts from the center and works its way out as far as the radial gradient is a concern.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 80%;
height: 100px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(rgb(234, 226, 138), rgb(100, 186, 140)); /* Standard syntax */
}
There’s one other thing you could do with a radial gradient, and that is setting the shape. Right now, you can see it as kind of like an ellipse or an oval but if I change this to a circle right here, let’s see. There you go. You could see, it’s now more circular in motion or circular. But if I get rid of it, it’s the standard ellipse version, okay?
You probably be able to see that better if this was a box. Let me define the width and the height, let’s say 300 pixels, okay? There you go. You could see there’s our circle and if I do get rid of it and there’s our ellipse.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
div {
width: 300px;
height: 300px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(circle, rgb(234, 226, 138), rgb(100, 186, 140)); /* Standard syntax */
}
That’s another thing that you can do with this gradient, and the other thing that you can do is also set the opacity so just like we have this RGB value. If you add in an A and then alpha code right there, I could go ahead and say, “Okay, this is one and we start with this is a 0.”
You can fade and blend it based on opacity. Let’s take a look at the body, make the body background, we’ll make it pink and see how that turns out and you can see how it’s actually on the inside of that. It’s pink because it’s partly transparent. That’s kind of another nifty thing that you can do with gradients.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {background:pink;}
div {
width: 300px;
height: 300px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(rgba(234, 226, 138,0), rgba(100, 186, 140,1)); /* Standard syntax */
}
Finally, one last one is, let’s take a look here and see if this works. I’m not very familiar with it but the repeating gradient value – all right. What I’ve done here is I have the repeating gradient and then what I’ve created is I’ve done 10% and 15% on this, and you could go to, let’s say, 25% and 20% and you can see what the gradient ultimately does is it starts this repeat factor of the shapes, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {background:pink;}
div {
width: 300px;
height: 300px;
color: #fff;
padding: 20px;
text-align: center;
/* Gradient items */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue); /* For Firefox 3.6 to 15 */
background: repeating-radial-gradient(rgba(234, 226, 138,0) 20%, rgba(100, 186, 140,1) 25%); /* Standard syntax */
}
We do like a repeat of that gradient time and time again and creates this spiral effect, not that I think you would want to use it. Usually, you’d probably stick to the linear gradient or even the radial gradient but you can see all these different variations that you could do to create buttons ultimately from me I either stick to that radiant or the linear or most of the time even the linear gradient for some buttons because you can create some really great things and great variations when it comes to these gradients, just looking at that nice soft little subtle fade from one color to the next.
