Use a CSS Linear Gradient to Create a Striped Element-i didnt understand, plse help mee , how to do

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,
       0px [yellow]40px [black]80px
    );
  }

</style>

<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.1.1; XT1562 Build/NPD26.48-24-1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36 OPR/46.3.2246.127744.

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

Hi,

I think the instructions for this challenge are a little unhelpful and are just confusing to people that are new to it. Hopefully this will help to clarify it:

background: repeating-linear-gradient(
    90deg, // gradient angle
    yellow 0px, // color stop 1
    blue 40px,  // color stop 2
    green 40px, // color stop 3
    red 80px // color stop 4
 );

In order to complete the challenge, you only need to change five things and the syntax stays the same.

The instructions are really getting at how the blending works, which I recommend you experiment with in order to understand it. If you take a look at color stops 2 and 3, you will see that they are both set to 40px- this means that there will be no blending between the blue and green. color stops 3 and 4 are set to different values of px’s and so there is a blending of red and green.

I hope this makes sense and is of some help :slight_smile:

PS: if you are still stuck, see what happens when you change the colors :wink:

2 Likes
3

thankyoubro,for your concern,my problem solved ,i understand how to do, thanks alott:face_with_raised_eyebrow: