Gradient color sizes

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.

demo link for original problem. Is the desired output this or this? — Joeytje50
The second "this" (where gradient transitions are shown) I suppose I didn't think about my percentages correctly with the gradients, thank you! — CoderMusgrove
This tool proved useful many times for me: colorzilla.com/gradient-editor — Floremin

Unknown Unknown · Accepted Answer · 2014-06-26T18:40:23

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%);
}

Gradient color sizes

1 Answers