CODEWITHSUNDEEP
htmlcsscolorsgradient
Rai Ammad Khan
Rai Ammad Khan

Reputation: 1561

Unclear about percentage % signs in CSS3 gradients

I am studying about CSS3 gradients (Link). I am unable to understand the following syntax

  /* Firefox 3.6 to 15 */
  background: -moz-linear-gradient(red, yellow 10%, green 20%);

Can anybody tell me what % signs do? What are their ranges? Should 2nd Percentage value (green 20%) be always greater than first percentage value (yellow %)? And why there is no percentage sign with red color?

Upvotes: 2

Views: 92

Answers (2)

Zaheer Jan
Zaheer Jan

Reputation: 243

Here percentage sign is use the to fill the background color correspondingly. If you have syntax,

background: -moz-linear-gradient(red, yellow 10%, green 20%);

It shows that it is started with red color first and the background is red when if you add yellow 10% now the whole background will be 1/10 of the the red means now red cover only 10% and the other 90% will be yellow, and when if you add green 20% then yellow and red will goes to 20% and other 80% will be of green and here 20% will divide into two parts one is actually define that is 10% of yellow and the red automatically set to other 10%.

Upvotes: 1

The_DemoCorgin
The_DemoCorgin

Reputation: 744

The percentage tells us what point it gradients to that color by. If you change yellow to 50%, it will gradient from red to yellow at the 50% point. If you give a percent value to red, the red won't start till that percent value, with the start being a solid of the final gradient color. If the third gradient color percentage is less than the second, then it won't show up. If the total values are less than 100% it will repeat that gradient pattern until 100% is accounted for.

Upvotes: 3

Related Questions