Start learning with our library of video tutorials taught by experts. Get started
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.
Hi there! My name is Justin Seeley. I'd like to welcome you to this course on CSS gradients. I'm pretty excited about this course, because it gives me a chance to show you an aspect of CSS that's often glossed over, but never really explored in depth. Gradients are a great way to add depth and texture to your web designs, and by using CSS to create them, we also cut down on the load time of our pages, which makes for a better viewing experience for our end-user. This course will start off with the basics of gradients, like browser specific syntax and creating simple linear and radial gradients as well. Once we get the basics nailed down, we're going to dive into a couple of mini projects, where you'll learn how to create an interesting gradient background for your site and also simulate metallic textures using nothing but CSS.
We'll wrap up the course by exploring things like creating diagonal gradients, adding gradients to text, and I'll even show you how you can use gradients to create some awesome repeatable patterns that can be used for backgrounds or buttons. I am excited to share all of this with you, so if you're ready, let's begin our look at CSS gradients.
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.