CSSでのグラデーション。2色程度の簡単なものは、使っていたけど調べてみると奥が深そうだったので、詳しい使い方をメモ。
基本的な使い方
background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);
background: linear-gradient(to 方向, 開始色, 終了色);
上記が横向き（左から右向き）にグラデーションをつける場合の一般的な書き方。応用編を下記に記載。
//縦（上から下）にグラデーションをつける場合
background: -moz-linear-gradient(top, 開始色, 終了色);
background: -webkit-linear-gradient(top, 開始色, 終了色);
background: linear-gradient(to bottom, 開始色, 終了色);
//色が変わる位置を変える
background: -moz-linear-gradient(left, 開始色 20%, 終了色);
background: -webkit-linear-gradient(left, 開始色 20%, 終了色);
background: linear-gradient(to right, 開始色 20%, 終了色);
//3色以上にする
background: -moz-linear-gradient(left, 開始色, 中間色 30%, 終了色);
background: -webkit-linear-gradient(left, 開始色, 中間色 30%, 終了色);
background: linear-gradient(to right, 開始色, 中間色 30%, 終了色);
//片側を透明にする（例は終了色が透明）
background: -moz-linear-gradient(left, 開始色, transparent);
background: -webkit-linear-gradient(left, 開始色, transparent);
background: linear-gradient(to right, 開始色, transparent);
//片側を半透明にする
background: -moz-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1));
background: -webkit-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1));
background: linear-gradient(to right, 開始色, rgba(255, 0, 0, 0.1));
//写真にグラデーションを重ねる
background: -moz-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL);
background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL);
background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL);
上記を組み合わせると、いろいろと複雑なものも表現が可能。
円形にグラデーションをつける
場合によっては円形にグラデーションをかける必要があるので円形グラデーションの方法もメモ。
//基本的な使い方
background: -moz-radial-gradient(中央の色, 外側の色);
background: -webkit-radial-gradient(中央の色, 外側の色);
background: radial-gradient(中央の色, 外側の色);
//色が変わる位置を変える
background: -moz-radial-gradient(中央の色 20%, 外側の色);
background: -webkit-radial-gradient(中央の色 20%, 外側の色);
background: radial-gradient(中央の色 20%, 外側の色);
//複数色の円形グラデーションをかける
background: -moz-radial-gradient(中央の色, 中間色 40%, 外側の色);
background: -webkit-radial-gradient(中央の色, 中間色 40%, 外側の色);
background: radial-gradient(中央の色, 中間色 40%, 外側の色);
CSSのグラデーション（linear-gradient）の使い方を総まとめ！
子供用靴下の販促サイト制作での使用例
SOCKSTAR（ソックスター）
