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.
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%);
}
black 50%, white 50%. That means <color> 0 can be a shorthand for switching to a new color at the previous step value.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.
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.
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> 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 */
According to: https://developer.mozilla.org/eUS/docs/Web/CSS/gradient/linear-gradient You can:
body {
background: linear-gradient(
to right,
red 20%,
orange 20% 40%,
yellow 40% 60%,
green 60% 80%,
blue 80%
);
}