Linear Gradient

Cross Browser Linear Gradient

by lucasprus

HTML

<div class="test"></div>

CSS

div.test {
    background-image: linear-gradient(45deg, transparent 51%, #cacaca 51%), linear-gradient(-45deg, transparent 51%, #cacaca 51%), linear-gradient(45deg, transparent 49%, #f9f9ef 49%), linear-gradient(-45deg, transparent 49%, #f9f9ef 49%);
    background-image: -o-linear-gradient(45deg, transparent 51%, #cacaca 51%), -o-linear-gradient(-45deg, transparent 51%, #cacaca 51%), o-linear-gradient(45deg, transparent 49%, #f9f9ef 49%), -o-linear-gradient(-45deg, transparent 49%, #f9f9ef 49%);
    background-image: -moz-linear-gradient(45deg, transparent 51%, #cacaca 51%), -moz-linear-gradient(-45deg, transparent 51%, #cacaca 51%), -moz-linear-gradient(45deg, transparent 49%, #f9f9ef 49%), -moz-linear-gradient(-45deg, transparent 49%, #f9f9ef 49%);
    background-image: -webkit-linear-gradient(45deg, transparent 51%, #cacaca 51%), -webkit-linear-gradient(-45deg, transparent 51%, #cacaca 51%), -webkit-linear-gradient(45deg, transparent 49%, #f9f9ef 49%), -webkit-linear-gradient(-45deg, transparent 49%, #f9f9ef 49%);
    background-image: -ms-linear-gradient(45deg, transparent 51%, #cacaca 51%), -ms-linear-gradient(-45deg, transparent 51%, #cacaca 51%), -ms-linear-gradient(45deg, transparent 49%, #f9f9ef 49%), -ms-linear-gradient(-45deg, transparent 49%, #f9f9ef 49%);
    background-image: -webkit-gradient(linear, 45deg, color-stop(0.51, transparent), color-stop(0.51, #cacaca)), -webkit-gradient(linear, -45deg, color-stop(0.51, transparent), color-stop(0.51, #cacaca)), -webkit-gradient(linear, 45deg, color-stop(0.49, transparent), color-stop(0.49, #f9f9ef)), -webkit-gradient(linear, -45deg, color-stop(0.49, transparent), color-stop(0.49, #f9f9ef));
    width:600px;
    height:15px;
    background-color:#2f5f9e;
}