Where is the yellow in the box when using linear gradient color stops?

Question

When all colours are set to 10% for linear gradients, why the yellow cannot be seen?

https://code.sololearn.com/WCoDR1aPuQN5/?ref=app

Answer 1

I have no idea why i spent my day on this
I do hope this help

https://code.sololearn.com/W2SystJ87i5m/?ref=app

Answer 2

You got the gradient in very small part of your form only. Try in this way:

background: linear-gradient(blue 0%, yellow 50%, green 100%);

Answer 3

silentlearner
try 10% 20% 10%
It is basically hiding the yellow behind the blue.

Answer 4

I think 🤔 it is more due to the editor Sololearn is using in this case silentlearner because yes according to css linear-gradient is suppose to be
10%
10%
10%

but it is acting more like
10% blue
sliver of yellow
then green which looks more like 90%

Answer 5

There isn't anything wrong with the editor.

Hopefully this explanation will help to answer the other questions.

Blue shows up even though the color stop is set to 0% because it is on a gradient scale.

Starting point is left 0% ending point is right 100%

The purpose of linear gradient is to blend two or more colors evenly on the scale.

The stop tells where to stop the color.

Example:
linear-gradient(blue 0%, yellow 50%, green 100%);

Start blending colors.

Blue stop at 0%
Yellow stop at 50%
Green Stop at 100%

Means

Blend blue and yellow evenly between 0% and 50% of the scale.
Blend yellow and green evenly
between 50% and 100% of the scale.

Answer 6

silentlearner here is something I did to do stops with multiple colors

.box1 {
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient(blue 5% 15%, yellow 20% 30%, orange 35% 50%, green 55% 65%, red 70% 80%, purple 85% 100%);
}

each color 10% fading within 5% as a blended padding of sorts.

alternatively linear-gradient

.box1 {
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient(blue 0%, yellow 20%, orange 35%, green 50%, red 70%, purple 90%);
}

Answer 7

silentlearner I got something that may help. I hope you find it enjoyable and learn at the same time. ☺
https://code.sololearn.com/WXm5Wt3MoKU8/?ref=app

Answer 8

BroFar , JaScript , Chris Coder , Abdul Samad
Thank you for helping me to understand Color Stops

Answer 9

From what I gathered in the Color Stops lesson, the next percentage should start from where the previous colour stops. Why doesn't the yellow continue from where blue stops in this case?

Answer 10

I wanted to see how the Color Stops will divide the colours as it was mentioned that the next percentage should start from where the previous colour stops. The yellow still doesn't show even if I put all colours to 30%

Answer 11

Why does blue show up even though the color stop was set to 0%?

Answer 12

What about yellow? What is the reason that it is not showing?