<style>
.demo.gra1{
background: linear-gradient(#FFF , #3636c3);
background: -moz-linear-gradient(#FFF , #3636c3);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#3636c3));
}
</style>
<div class="c">
<div class="t">縦方向</div>
<div class="demo gra1"></div>
</div>
<style>
.demo.gra2{
background: linear-gradient(to left, #FF0000 0%, #ffffff 100%);
background: -moz-linear-gradient(left, #ff0000, rgba(255,0,0,0));
background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(rgba(255,0,0,0)));
}
</style>
<div class="c">
<div class="t">横方向</div>
<div class="demo gra2"></div>
</div>