div {
margin: 15px 0;
width: 100px;
height: 100px;
background: #000;
border: 1px solid #ccc;
background: rgb(255, 0, 0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#f6f6f6', GradientType=0); /* IE6-9 */
}
.horizontal {
background: rgb(255, 0, 0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#f6f6f6', GradientType=1); /* IE6-9 */
}
<div></div>
<div class="horizontal"></div>