From the course: CSS: Enhancing Website Graphics
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Repeating a gradient - CSS Tutorial
From the course: CSS: Enhancing Website Graphics
Repeating a gradient
- [Instructor] In the last two videos you learned how to fill a background with a single gradient. In this video you will learn how to repeat that same gradient multiple times across a background. To repeat a linear gradient in CSS you use the repeating linear gradient function. The options for this function are the same as what you already use for the linear gradient function but with one key difference. To repeat the linear gradient you have to set a color stop for the last value in the color list. That's less than the width or height of the background. For example, let's change the color stop for the last color blue to something less than 100%. As we change the value the gradient is now repeated several times. In fact, if we set the color stop to 10% or one tenth of 100, we have that linear gradient repeated 10 times. And if we increase the color stop to 20%, or one fifth of 100%, we now have the gradient repeated five times. And the color stop of 33% repeats a gradient three…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.