Css Div 2 Background Colors

I am attempting to make a div with 2 background colors, and I am aware that you can do the 50/50 gradient, but when you go more extreme, say, 20/80, the colors start to blend. I ha

Solution 1:

The gradient is just rendering how it is supposed to, you just need to change your CSS to make it how you want. To render to solid colors, both percentages must be the same. Here is some different examples of this:

div{
  width:200px;
  height:200px;
  background:linear-gradient( red 50%, blue 50%);
  }

50/50
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 80%, blue 80%);
}

80/20
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 30%, blue 30%);
}

30/70
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 40%, blue 40%);
}

40/60
<div></div>

Updated codepen

As you can see from the above examples, the key is to set both of the percentages to the same, so there is no space to blend the two colors. See these two images for an example:

Solution 2:

"-webkit-linear-gradient(top, #222222 "+percent+"%, grey "+percent+"%)"

You have to use the same percentages:

background-image: linear-gradient(bottom, #FFD51A20%, #FAC81520%);

or

background-image: linear-gradient(bottom, #FFD51A80%, #FAC81580%);

... the percentages are defining the color-stops position.

More about gradients here: http://www.w3schools.com/css/css3_gradients.asp and here https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient