Color Stop Parameter in Linear Gradient

Question

I have this repeating linear gradient CSS design.

#div1{
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

I know what is meant by the color parameters but the percentage right after the color seems vague. What is it really meant for ? Is that identifies the position where the color must start? or what?

I already read the documentation, but I couldn't understand it. Can someone explain it to me in simpler words ?

Thank you.

W3Schools in not *the documentation*. [**This**](https://www.w3.org/TR/css3-images/#linear-gradients) is the documentation — Paulie_D, Jun 29 '16 at 10:00
..and is it the **repeating** part you have trouble with or the whole concept? — Paulie_D, Jun 29 '16 at 10:39

Paulie_D · Accepted Answer · 2016-06-29T11:08:31.087

OK, I'll give this a shot...but first the documentation is actual at w3.org...not W3Schools!

This is your code (assuming a div height of 100px):

#div1 {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
  height: 100px;
}

<div id="div1"></div>

So your final % figure is 20%, which means, in the case of a repeating gradient, that the gradient itself will end at 20% of the height of the element and then repeat.

So 100% / 20% = 5 so the gradient repeats 5 times.

See what happens when the last number is changed

#div1 {
  background: repeating-linear-gradient(red, yellow 10%, green 33.33%);
  height: 100px;
}

<div id="div1"></div>

Now as for each percentage, lets try this will a standard left to right gradient

#div1 {
  background: linear-gradient(to right, red, yellow 10%, green 20%);
  height: 100px;
}

<div id="div1"></div>

Here the color stops work like this.

The gradient starts out red, and changes gradually until it's yellow at 10% of the width. The color will start changing again, this time to green, immediately until it's fully green at 20% of the width...and then stays that color as no other color is mentioned after wards.

For a solid band of color (say yellow) the color has to be stated twice at different values

#div1{
    background: linear-gradient(to right, red, yellow 10%, yellow 20%, green 30%);
    height: 100px;
}

<div id="div1"></div>

You can get a hard line change by repeating the percentage values when changing from one color to another

#div1 {
  background: linear-gradient(to right, red 10%, yellow 10%, yellow 20%, green 20%);
  height: 100px;
}

<div id="div1"></div>

Color Stop Parameter in Linear Gradient

1 Answers1