線形グラデーション

CSS3の「linear-gradient」で背景やボタンにグラデーションを付けます。
背景に指定する場合が下記のとおりです

background:linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

開始位置は、left・center・right、top・center・bottom又はパーセンテージ、pxなどの単位を付けた数値で指定します。 角度はグラデーションの方向でdegなどの単位を付けた角度値で指定します。開始位置と角度は省略可能で、省略した場合は開始位置はtop、角度は開始位置と反対方向になります。開始位置がtopの場合は下方向に、開始位置がleftの場合は右方向になります。複雑なグラデーションでない場合省略でOKです。

サンプル１
開始位置 left、開始色 白、終了色 赤
background:linear-gradient(left, #fff,#f00);
background:-webkit-linear-gradient(left, #fff,#f00);

サンプル2
開始位置 省略（top）、開始色 白、終了色 赤
background:linear-gradient(#fff,#f00);
background:-webkit-linear-gradient(#fff,#f00);

サンプル3
開始位置 left、開始色 赤、途中色 白、終了色 赤
background:linear-gradient(left,#f00,#fff,#f00);
background:-webkit-linear-gradient(left,#f00,#fff,#f00);

サンプル4
開始位置 省略（top）、開始色 赤、途中色 白、終了色 赤
background:linear-gradient(#f00,#fff,#f00);
background:-webkit-linear-gradient(#f00,#fff,#f00);

サンプル5
開始位置 省略（top）、角度 45度、開始色 赤、途中色 白、終了色 赤
background:linear-gradient(45deg,#f00,#fff,#f00);
background:-webkit-linear-gradient(45deg,#f00,#fff,#f00);

サンプル5
開始位置 省略（top）、角度 45度、開始色 赤、途中色 オレンジ・黄色・グリーン・青・終了色 青藍
background:linear-gradient(45deg,red, orange, yellow, green, blue, indigo);
background:-webkit-linear-gradient(45deg,red, orange, yellow, green, blue, indigo);