Gradient color tailles - html, css, gradient

J'apprends encore certaines parties des dégradés et je souhaite accomplir quelque chose qui permettrait à certaines couleurs de dégradés d'avoir certaines tailles.

Exemple
Disons que j’ai un dégradé avec 3 couleurs: rouge, violet et bleu, dans cet ordre, de haut en bas. Je veux que le rouge soit présent à environ 10%, le violet à 80% et le bleu à 10%. J'ai essayé de créer cela avec un JSFiddle, et ça ne marche pas comme je l’avais prévu. Avec le code que j'ai essayé d'utiliser, et le résultat est funky. En fait, le dégradé n’est même plus un dégradé, il passe simplement d’une couleur à l’autre:

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

Accomplissant
Ce que je veux accomplir, c'est d'avoir un dégradéqui commence par avoir, disons 10px d’une couleur, puis au bas, il y a encore 10px d’une couleur différente, tandis qu’entre ces deux couleurs sera une couleur unique, de sorte que la taille de l’élément n’affecte pas la longueur de la gradients.

Merci pour votre aide à l'avance.

Réponses:

Solution donnée par OP:

----- RESOLU ----- Merci à @ Joeytje50 pour l'aide. Je n'ai jamais pensé à la façon dont les pourcentages ont été utilisés, et merci. La bonne façon sur ce que j'essayais d'accomplir ~ 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%);
}