[CSS3]グラデーション

CSS3でグラデーションかけらるのは知っていたけど、使ったことがなかったので、ちょっと書いてみた。

<style>
#hoge_1{
  width:100px;
  height:100px;
  background-image: linear-gradient(to bottom , red , blue);
}
#hoge_2{
  width:100px;
  height:100px;
  background-image: linear-gradient(to left , red , blue);
}
#hoge_3{
  width:100px;
  height:100px;
  background-image: linear-gradient(to top , red , blue);
}
#hoge_4{
  width:100px;
  height:100px;
  background-image: linear-gradient(to right , red , blue);
}
</style>
<div id="hoge_1"></div>
<div id="hoge_2"></div>
<div id="hoge_3"></div>
<div id="hoge_4"></div>

試した結果は、下。