CSSでグラデーションを付ける方法。（linear-gradient）の使い方

グラデーション（gradient）とは、色や濃淡を連続した階調で表現することです。最近ではインスタグラムのロゴを始め、様々なところでグラデーションが多様されています。

確かに、色を単色で利用するよりも、グラデーションを使ったほうがより生き生きとした雰囲気を表現することができます。しかし、グラデーションをWeb技術で表現するときに、どのようにすればいいかご存知ですか？

そこで今回は、もう一度学び直したいCSSグラデーションの基礎についてまとめていきました。

グラデーション自体は以前から表現可能だったわけですが、ここで改めてその表現方法や応用例などをご紹介していきます。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

CSSでグラデーションを作成する方法

Webブラウザでグラデーションを表現できるようになったのはだいぶ前からですが、2016年を境にグラデーションに関する関心があらためて高まってきています。

グラデーションをCSSで作成することができなかった「不便な」時代には、グラデーションのスライス画像を作成して、「background」でグラデーション画像を指定することで「擬似的に」グラデーションを表現していましたが、現在ではCSSで簡単にグラデーションを表現できるようになっています。

「linear-gradient」と「radial-gradient」

最も簡単な形は、「background」に「linear-gradient」もしくは「radial-gradient」を指定することです。中でも、直線的にグラデーションを指定する「linear-gradient」が最も基本的な形としてよく使われます。

.wrap {
　　background: linear-gradient(#000046, #1cb5e0 );   
}

デフォルトでは、以下のように上から下に引くようになっています。

グラデーションの方向を決める

続いて、最初に方向を表す属性を色の前に付け加えることで、グラデーションの方向を決めることができます。

.wrap {
　　background: linear-gradient(to right , #000046, #1cb5e0 );   
}

上の図では、「to right」を指定することで右方向にまっすぐグラデーションを指定していきます。同様に、このパラメーターを「to top right」にすれば、右上に向かってグラデーションをかけることになります。これは、実際に「45deg」（45度）を指定するのと同じ状態になります。

3色以上のグラデーションを作る

グラデーションの使用は、2色にとどまりません。実際に、3色、4色……と付け加えていくことが可能です。

.wrap {
　　background: linear-gradient(to right, orange, deeppink, blueviolet, cyan);   
}

特定の幅のグラデーションを広く取る

また、グラデーションのある特定の色の幅を広く取ることもできます。その場合には、以下のようにパーセンテージを指定します。

.wrap {
　　background: linear-gradient(to right , #000046 80%, #1cb5e0 );   
}