Viewers: in countries Watching now:
Join Justin Seeley as he introduces gradients, a somewhat hidden strength of CSS that allows you to add depth and texture to your web designs while reducing load times—creating a better viewing experience for your visitors versus static images. Discover how to create simple linear and radial gradients; apply them to backgrounds, buttons, and text; and write browser-specific syntax to ensure your designs look the same across multiple platforms. The course also shows how to create metallic textures, diagonal gradients, and repeatable patterns. Along the way, Justin demonstrates real-world uses for gradients and techniques to extend them beyond the basics.
When it comes to adding color stops to your radial gradients, what you need to understand is where you add the colors in relationships to the other colors that are already defined, really changes the overall look and feel of your gradient. The process of adding the colors is the same as you would in a linear gradient, although the effects might look a little different here simply because of the nature of the gradient itself. So in this example what we're going to do is we're going to start off here. In this document I'm just going to add some colors, and as I add them you'll see exactly what I mean by this. Let's say that I wanted to add a blue color to this. Let's add the blue before the yellow color first.
When I do that and save it and refresh, you'll notice that the blue color now becomes the center of the gradient, and that is because this goes from center out when you're talking about the colors. So you need to focus on going from the center outward. So if you want yellow to be your base color then backup off of that and then build upon it. So in this case what I want to do is I want to just completely redo this. So I'm just going to delete all of those, we'll come back to this in a moment, and I'll delete all the color decorations. There we go.
And so what I want now is I want to start off with red as my center point, so red. I want to follow that with yellow. I want to follow that with green. I want to follow that with blue, and then I want to follow that with black. And so now, having all those in place if I save that, if I refresh this it should look just like a rainbow spectrum, and there we go. Now it does have predominantly blue on the outside and kind of fades in. It's kind of a reverse rainbow, if you ask me. So what I would want to do is actually reverse that a little bit. So in order to do that we would just do black, blue, green, yellow, red just like that, reverse it, and there you go.
So you can get some pretty interesting looks from this and adding or subtracting stops goes a long way to changing how this looks. So if I remove the black for instance and go back and refresh, you can see that changes the overall look and feel of this. Same thing if I were to remove the blue, refresh, looks something like this. And if I remove the green, it looks something like that. So you can take some time and play around with adding the colors to your stops, you can also control the position of the stops by adding some modifiers which we'll talk about in our creating complex radial movie here in just a moment.
But for now, just know that adding stops to this is just as simple as finding the color you wanted to come after, creating a space, typing out a new color, comma, saving and then refreshing.
There are currently no FAQs about CSS: Gradients.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.