今回のCSS3プロパティは線形グラデーション(linear-gradient)についてです。
今までは背景やボタンでグラデーションを使いたければ背景画像を使わなければなりませんでしたが、CSS3のlinear-gradientを使うことでグラデーションをCSSで設定することができるようになりました。

Firefoxやwebkit系ブラウザでは比較的早い段階から実装されていましたが、当初はそれぞれで書き方が違うという非常に面倒な状況でした。 ですが最近ではwebkitでもFirefoxと同様の書き方ができるようになり、Operaでも実装されたりと、ようやく使えそうなレベルまで来ました。

線形グラデーション(linear-gradient)

開始位置には、x座標とy座標を指定します。left/center/right、top/center/bottomのキーワードのほか、パーセンテージやpxをを使って指定することができます。 大抵はtop(上から)、もしくはleft(左から)を指定することになるかと思います。初期値はtopです。

角度はグラデーションの方向を指定します。角度は右方向を0°として反時計回りです。
指定しない場合は開始位置からボックスの中心点に向かう角度になります。つまり、開始位置と反対方向となります。leftなら右方向、topなら下方向です。 複雑なグラデーションでない限り多くの場合は省略できると思います。
また、Operaは角度に対応していないので、角度を設定してしまうとOperaではCSSが無効になります。

開始色と終了色は必須ですが途中色は任意で、いくつでも増やすことができます。
色指定とオフセットをセットで指定します。もしオフセットを省略した場合は、開始色、途中色、終了色が等間隔で配置されていきます。

サンプル

#sample1 {
	background: linear-gradient(left, #d5def6 0%, #9bf2d6 100%);
	background: -webkit-linear-gradient(left, #d5def6 0%, #9bf2d6 100%);
	background: -moz-linear-gradient(left, #d5def6 0%, #9bf2d6 100%);
	background: -o-linear-gradient(left, #d5def6 0%, #9bf2d6 100%);
	background: -ms-linear-gradient(left, #d5def6 0%, #9bf2d6 100%);
}
#sample2 {
	background: linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 51%, #1a62db 100%);
	background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 51%, #1a62db 100%);
	background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 51%, #1a62db 100%);
	background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 51%, #1a62db 100%);
	background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 51%, #1a62db 100%);
}
#sample3 {
	background: linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%);
	background: -webkit-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%);
	background: -moz-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%);
	background: -o-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%);
	background: -ms-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%);
}

一番上は左から右への単純なグラデーション。
二番目は真ん中付近で色が変わるボタン風グラデーション。
三番目はxが25%、yが75%のところから45度の角度(右上)へ向かっていくグラデーションです。Operaは角度に対応していないのでグラデーションが設定されませんので、見えません…。

グラデーションを自動生成するWebサービス

ここまでグラデーションを描画する方法を書いてきましたが、手打ちで設定するのははっきり言ってめんどくさい。
現在は書き方が統一されているのでまだマシですが、webkitが独自仕様(?)になっていたときはさらに大変でした。

しかし、今ではありがたいことにグラデーションを生成するためのWebサービスがいくつも公開されています。


CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor-
最初からいくつかのプリセットがあり、それを調整するだけで簡単に綺麗なグラデーションが作れます。グラデーションのかかったボタンを作りたいときは非常に便利です。
サンプルのテキストのサイズや色も変更して試すことができるなど、細かい部分でも使いやすい。説明が日本語で詳しく書かれているのも◯


Ultimate CSS Gradient Generator – ColorZilla.com
こちらもいくつかのプリセットがあるのでそれを調整してグラデーションを作ることができます。
グラデーションを作るUIがPhotoshopに似ており、オフセットのパーセンテージ等、細かい数値調整もできるようになっています。 Photoshopなどで作成したグラデーションをもとに作成する際に適しています。


CSS3 Gradient Generator
前2つに比べるとかなりシンプルですが、必要なものは揃っています。
色を増やす方法がわかりにくいですが、増やすにはColor Swatchesの右の+ボタン、消すときはオフセットを調整するスライダーの右の×ボタンです。