In css gradient color rule why use of two color one is just color and after color with size like "red,red 20px"

MDN Learn
1 
     background-image: repeating-linear-gradient(-45deg,
          transparent,
          transparent 20px,
          black 20px,
          black 40px);

Here transparent has used 2 times why? I don’t know about this reason. I have a question why not transparent 20px just one time. I want to know about the reason why use of two times .Please help me anyone.I am totally new in this topic.

2

Hi @rkprite09

transparent, (without a px value) defaults to transparent 0;. That means we get a transparent stripe from 0 to 20px. When you delete transparent, we don’t have a range for the transparent part and therefore the whole background is black, because it’s the only range defined.

You can put your example into the live example section of MDN | repeating-linear-gradient() (top of the page) to experiment yourself.

I hope that helps. Have a nice day!
Michael

3

Thanks for this replay. I have stucked all day long for this line of code and in the afternoon I have done its by googling more in the web. But you have define the same .Love you guys because I always get support here.

Have a good day.

1 Like
4

I’m happy that you figured it out :slightly_smiling_face:

5

Thanks man. You saved my day.

1 Like