using gradient but without mixing color - css

Question

I don't know if that is a stupid question or something like that but i want a div to be filled certain percent by one color and remaining part by other.
And the gradient property
.div{
background: linear-gradient(to right, #000 50%, #fff 50%);
}
Results into
.div{
background: linear-gradient(to right, #000 28%, #fff 72%);
}
And this results into
i want to get the white and black not to mix and be seperated on all percentages.

Answer 1

try this
.div{
background: -webkit-linear-gradient(left, black 50%, white 0%);
background: -moz-linear-gradient(left, black 50%, white 0%);
background: -ms-linear-gradient(left, black 50%, white 0%);
background: linear-gradient(left, black 50%, white 0%);
}

Answer 2

When you did:
background: linear-gradient(to right, #000 28%, #fff 72%);
it means:
Black (#000) from 0% to 28%, then start a gradient to white (#fff) until reach 72% and after this gradient, use white until the end.
So you can use:
background: linear-gradient(to right, #000 28%, #fff 28%);
This way you'll get: black from 0 to 28%, a gradient from 28% to 28% (it means, no gradient), and white from 28% to the end. So you'll get only back and white, without the gradient between them.

Answer 3

Why do you want to use gradient in first place if you dont want them to mix?
Anyway this is working:
div{
height: 200px;
background: -moz-linear-gradient(left, white 50%, black 0%);
background: -linear-gradient(left, white 50%, black 0%);
background: -webkit-linear-gradient(left, white 50%, black 0%);
}
you can put any value for white. It wont mix.

Answer 4

do you mean :
div{
background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%);
color:green
}
body {
background:yellow
}
<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>

Answer 5

You can Give Multiple gradient Color to a Div
Use this Css
Check this Demo
http://jsfiddle.net/dineshkanivu/2pcccd2p/1/
http://jsfiddle.net/dineshkanivu/2pcccd2p/
background: #ff474a; /* Old browsers */
background: -moz-linear-gradient(top, #ff474a 0%, #7a2e68 50%, #0cf900 51%, #0a0784 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff474a), color-stop(50%,#7a2e68), color-stop(51%,#0cf900), color-stop(100%,#0a0784)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff474a', endColorstr='#0a0784',GradientType=0 ); /* IE6-9 */