CODEWITHSUNDEEP
htmlcssgradient
CoderMusgrove
CoderMusgrove

Reputation: 614

Gradient color sizes

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.

Upvotes: 0

Views: 96

Answers (1)

Frakcool
Frakcool

Reputation: 11153

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

Upvotes: 1

Related Questions