Gradient color sizes - html

Question

I'm still learning parts of gradients, and I want to accomplish something that would enable certain colors of gradients to be certain sizes.
Example
Let's say I have a gradient with 3 colors: red, purple, and blue, in that order, from top to bottom. I want red to be around for 10%, and purple as 80%, and blue again as 10%. I have tried to create this with a JSFiddle, and it doesn't work out how I planned for it to. Along with the code I attempted to use, and the result is funky. In fact, the gradient isn't even a gradient any more, it's just goes from one color to another:
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 10%, purple 80%, blue 10%);
background: -o-linear-gradient(red 10%, purple 80%, blue 10%);
background: -webkit-linear-gradient(red 10%, purple 80%, blue 10%);
background: linear-gradient(red 10%, purple 80%, blue 10%);
}
Accomplishing
What I want to accomplish is to have a gradient that starts off having, say 10px of a color, and then at the bottom is another 10px of a different color, while in between those two colors will be a single color, so the size of the element doesn't affect the length of the gradients.
Thank you for your help ahead of time.

Answer 1

Solution given by OP:
----- SOLVED -----
Thanks to #Joeytje50 for the help. I never thought towards how the percentages were actually used, and thank you. The correct way on what I was trying to accomplish ~ JSFiddle
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -o-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -webkit-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
}