Lesson

freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element

Lesson Summary

In this lesson from the Applied Visual Design walkthrough we look at creating a cool gradient effect. We create a striped element using the repeating-linear-gradient function. This function we find out is kind of like the linear-gradient function. The big difference is that it will repeat the specified pattern. There are many values it accepts but in this challenge we use the same degree value from the last lesson. We learn we can make a cool striped effect by using for the function something like this repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px ); The px's dont matter for this to work since the blending of yellow between yellow and black between black will not be noticeable.

Subscribe To Monthly Newsletter. Chance to Win Monthly Prizes

* indicates required


Share: