CSS3でボックスの背景をグラーションについていろいろと調べてみた。
今のところ対応しているブラウザは、Safari , Google Chrome , Firefox

その実装方法は・・・


background: -moz-linear-gradient(top, #990, #066);　/* Firefox 用 */

background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066)); 　/* Safari,Google Chrome用 */

Firefoxでグラーデションの方向は一番最初にある「top」と記述されているところを変更すると良いみたい。（開始位置のみ指定する）
グラーデションを斜めから始めたい場合は、「left top」とすると良いらしい。

また、途中から色を加えたい場合は


background: -moz-linear-gradient(left top, #990,
 #c36 30%,
 #f60 50%,
 #000 70%,
 #066);　/* Firefox用 */
background: -webkit-gradient(linear, left top, right bottom, from(#990),
 color-stop(0.3, #c36),
 color-stop(0.5, #f60),
 color-stop(0.7, #000),
 to(#066)); 　/* Safari,Google Chrome用 */

グラデーションを透過する場合は・・・


background: -moz-linear-gradient(top,
 rgba(60,100,50,0.5),
 #066);　/* Firefox 用 */
background: -webkit-gradient(linear, left top, left bottom,
 from(rgba(60,100,50,0.5)),
 to(#066));　/* Safari,Google Chrome用 */

とするようだ。

グラデーションがCSSでできるようになって、IEにも実装されたら画像の数とか圧倒的にヘルと思う。

出典元
http://www.css-lecture.com/log/css3/css3-gradient.html

関連記事