Градиент

DEMO

HTML

 <div class="gradient"></div> 

 <div class="gradient2"></div>

CSS

.gradient {
  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.2), #000 100%);
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2), #000 100%);
    background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.2), #000 100%);
    background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.2), #000 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), #000 100%);	
	height: 100px;
}

.gradient2 {
background: -moz-linear-gradient(left, rgba(156, 159, 255, 0.54), #000 100%);
    background: -webkit-linear-gradient(left, rgba(156, 159, 255, 0.54), #000 100%);
    background: -o-linear-gradient(left, rgba(156, 159, 255, 0.54), #000 100%);
    background: -ms-linear-gradient(left, rgba(156, 159, 255, 0.54), #000 100%);
    background: linear-gradient(left, rgba(156, 159, 255, 0.54), #000 100%);	
	height: 100px;
}