CSS: Gradients

with Justin Seeley
please wait ...
CSS: Gradients
Video duration: 0s 1h 13m Beginner


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.

Topics include:
  • Exploring browser compatibility
  • Creating horizontal and vertical gradients
  • Adding extra color stops
  • Exploring radial gradient syntax
  • Using transparency
  • Creating fallbacks
  • Generating gradients via the web


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 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've got the basics nailed down, we're going to dive into a couple of mini projects where you'll learn how to create 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'm excited to share all of this with you. So, if you're ready, let's begin our look at CSS Gradients.

please wait ...