html - Gradient color sizes -

html - Gradient color sizes -

i'm still learning parts of gradients, , want accomplish enable colors of gradients sizes.

example let's have gradient 3 colors: red, purple, , blue, in order, top bottom. want reddish around 10%, , violet 80%, , bluish 1 time again 10%. have tried create jsfiddle, , doesn't work out how planned to. along code attempted use, , result funky. in fact, gradient isn't gradient more, it's goes 1 color another:

.gradient-square { width: 100px; height: 100px; background: -moz-linear-gradient(red 10%, violet 80%, bluish 10%); background: -o-linear-gradient(red 10%, violet 80%, bluish 10%); background: -webkit-linear-gradient(red 10%, violet 80%, bluish 10%); background: linear-gradient(red 10%, violet 80%, bluish 10%); }

accomplishing want accomplish have gradient starts off having, 10px of color, , @ bottom 10px of different color, while in between 2 colors single color, size of element doesn't impact length of gradients.

thank help ahead of time.

solution given op:

----- solved ----- @joeytje50 help. never thought towards how percentages used, , give thanks you. right way on trying accomplish ~ jsfiddle

.gradient-square { width: 100px; height: 100px; background: -moz-linear-gradient(red 0%, violet 10%, violet 90%, bluish 100%); background: -o-linear-gradient(red 0%, violet 10%, violet 90%, bluish 100%); background: -webkit-linear-gradient(red 0%, violet 10%, violet 90%, bluish 100%); background: linear-gradient(red 0%, violet 10%, violet 90%, bluish 100%); }

html css gradient