背景をグラデーションにする

グラデーションの基本スタイル

background: {色１};
background: -moz-linear-gradient({開始位置}, {色１}, {色２});
background: -webkit-linear-gradient({開始位置}, {色１}, {色２});
background: linear-gradient(to {方向}, {色１}, {色２});

CSSで背景をグラデーションにする場合は、linear-gradientを使います。指定は引数の１番目に方向、２番目以降はグラデーションで使う色をカンマ区切りで指定します。

ベンダープレフィックスも使います。ここで注意したい点は引数１番目が方向ではなく開始位置になります。つまり方向とは逆の指定になります。

最初にひとつだけ色を指定したbackgroundは、グラデーションに対応していないブラウザ向けの指定です。

横のグラデーション（）

background: #6699ff;
background: -moz-linear-gradient(left, #6699ff, #ffccff);
background: -webkit-linear-gradient(left, #6699ff, #ffccff);
background: linear-gradient(to right, #6699ff, #ffccff);

横にグラデーションをさせるには、引数１番目にto rightを指定します。ベンダープレフィックスは逆の指定になるのでleftを指定します。

縦のグラデーション（）

background: #6699ff;
background: -moz-linear-gradient(top, #6699ff, #ffccff);
background: -webkit-linear-gradient(top, #6699ff, #ffccff);
background: linear-gradient(to bottom, #6699ff, #ffccff);

縦にグラデーションをさせるには、引数１番目にto bottomを指定します。ベンダープレフィックスは逆の指定になるのでtopを指定します。

斜めのグラデーション（）

background: #6699ff;
background: -moz-linear-gradient(315deg, #6699ff, #ffccff);
background: -webkit-linear-gradient(315deg, #6699ff, #ffccff);
background: linear-gradient(135deg, #6699ff, #ffccff);

左上から右下に向かってグラデーションをさせるには、引数１番目に135degを指定します。to bottom rightと指定することもできますが、細かく角度の指定をおこないたい場合にはdegを使用します。

ベンダープレフィックスの角度は、90度からlinear-gradientの角度を引いた角度を設定します。この例でいうと「90 - 135 = -45(315)」となります。degの値はマイナス指定もできますので、-45degと指定することもできます。

斜めのグラデーション（）

background: #6699ff;
background: -moz-linear-gradient(45deg, #6699ff, #ffccff);
background: -webkit-linear-gradient(45deg, #6699ff, #ffccff);
background: linear-gradient(45deg, #6699ff, #ffccff);

左下から右上に向かってグラデーションをさせるには、引数１番目に45degを指定します。to top rightと指定することもできます。細かく角度を指定したい場合はdegを使いましょう。

ベンダープレフィックスの角度は、90度からlinear-gradientの角度を引いた角度を設定します。この例でいうと「90 - 45 = 45」となります。

円形のグラデーション（）

background: #6699ff;
background: -moz-radial-gradient(#6699ff, #ffccff);
background: -webkit-radial-gradient(#6699ff, #ffccff);
background: radial-gradient(#6699ff, #ffccff);

円形のグラデーションにするには、linear-gradientではなくradial-gradientを使用します。引数は、方向や角度の指定は必要なく色のみを指定します。色は内側から順番に指定します。

３色以上のグラデーション

background: #6699ff;
background: -moz-linear-gradient(left, #6699ff, #99ccff, #ffccff);
background: -webkit-linear-gradient(left, #6699ff, #99ccff, #ffccff);
background: linear-gradient(to right, #6699ff, #99ccff, #ffccff);

３色以上のグラデーションをするには、引数の色指定を追加します。

色の位置を指定したグラデーション

background: #6699ff;
background: -moz-linear-gradient(left, #6699ff 50%, #ffccff 100%);
background: -webkit-linear-gradient(left, #6699ff 50%, #ffccff 100%);
background: linear-gradient(to right, #6699ff 50%, #ffccff 100%);

色の位置を変えたグラデーションにするには、引数の色の後ろに指定したい位置を追加します。位置を指定した場合はその箇所がその色の起点になります。

透明度を使ったグラデーション

background: rgba(102, 153, 255, 1);
background: -moz-linear-gradient(left, rgba(102, 153, 255, 1), rgba(102, 153, 255, 0));
background: -webkit-linear-gradient(left, rgba(102, 153, 255, 1), rgba(102, 153, 255, 0));
background: linear-gradient(to right, rgba(102, 153, 255, 1), rgba(102, 153, 255, 0));

透明度を使ったグラデーションにするには、色をrgba関数を使って指定します。rgba関数は、４番目の引数で透明度を指定することができます。これを使ってグラデーションをおこなうと徐々に消えていくようなグラデーションが表現できます。