CSS Gradient

by Mohamed Rias

HTML

<div class="asd">
    <div class="qwe">
    </div>
</div>

CSS

.qwe {  
    height: 200px;
    width: 200px;
    background: -moz-linear-gradient(black, transparent); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, transparent); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, transparent); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, transparent); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent)"; /* IE8+ */  
    background: linear-gradient(red, transparent); /* the standard */  
    z-index: 1;
}

.asd {
  background-color: Green;   
    height: 300px;
    width: 300px;
    z-index: 0;
}