CSS「gradient」を使ってグラデーションを実装

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（ソックスター）