How to Use a CSS Linear Gradient to Create a Striped Element

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg 40px [yellow -- blend -- black] 0px [yellow -- blend -- black] 80px
    );
  }

</style>

<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element/

2

SYNTAX:

background: repeating-linear-gradient(45deg, color px, color px, color px, color px);

Now apply these to the parameters after 45deg,

The color stop at 0 pixels should be yellow.
One color stop at 40 pixels should be yellow.
The second color stop at 40 pixels should be black.
The last color stop at 80 pixels should be black.

1 Like
3

hey @Sujith3021 thnx…it worked!!

1 Like