gradient_1

sample_1

CSS3では画像を使用せずにグラデーションの指定ができるようになりました。ここでは、線形グラデーションの指定を解説します。Firefox系とSafari/Chrome系の指定はそれぞれ異なりますので、注意してください。

gradient_2

sample_2

斜め方向にグラデーションを指定するには、Firefox系-moz-指定では、2点の開始位置を指定、Safari/Chrome系では、開始位置、終了位置、それぞれ2点指定します。

gradient_3

sample_3

RGBAを使うとグラデーションに透明度の設定もできます。