CSS（linear-gradient）や画像を使った効果的なグラデーションの表現

グラデーションを効果的に使えば、印象的なWebサイトを作ることができます。

ただし、間違ったグラデーションの使い方をすると一気にダサい雰囲気になってしまいます。

今回は、Webサイトにグラデーションを使う方法を紹介します。

CSSのコードを紹介する前に、グラデーションのコツも解説しておきます。

ダサいグラデーション

まずは、いかにも「ダサい」グラデーションを紹介します。

彩度が高く、色が多い

彩度が高く、色が多すぎるすると一気にダサいグラデーションになります。

必要ないのにグラデーション

これは酷い。さすがにこのブログを読んでいる人はこのような無意味なグラデーションを使わないと信じています。

グラデーションを使う時の心得

効果的なグラデーションにするためのコツを紹介します。

明度を上げて、彩度を抑える

彩度が高いグラデーションというのは難易度が高く、失敗に繋がります。

明度を上げて彩度を下げるというのは、白に近づけること、もしくは色を薄くするようなイメージです。

上の例にあるグラデーションを薄くしてみました。

どうでしょう。優しい雰囲気になり、良い感じになりました。

近い色を使う

例えば緑と赤のような反対の色（補色）を使うのは難易度が高いのでおすすめできません。

青と緑、赤とオレンジ、オレンジと黄色、紫と青など近い色を使うと綺麗になります。

後者のグラデーションの方が綺麗ですね。

質感を表現する

グラデーションを使うと、色の変化を表現できるだけではなく、質感を与えることができます。

このようなグラデーションを使うと、左上から光が当たっているように見えます。

グラデーションのCSS（linear-gradient）

CSSでグラデーションを表現するには、linear-gradientを使います。

background: linear-gradient(方向, 開始色, 終了色);

方向と開始色と終了色を記述して使います。

例1

まずは基本的な形です。

background: linear-gradient(to right, #83e4db, #6ea2e2);

to rightというのは「右方向へのグラデーション」という意味です。

degという単位を指定して使うこともできます。

background: linear-gradient(90deg, #83e4db, #6ea2e2);

このCSSは上と同じ表示になります。

例2

background: linear-gradient(方向, 開始色, 途中色, 終了色);

２色だけではなく、色を増やすこともできます。

background: linear-gradient(to right, #83e4db,#6ea2e2, #956ee2);

例3

background: linear-gradient(方向, 開始色 位置, 途中色 位置, 終了色 位置);

色が変化する位置を指定することもできます。

background: linear-gradient(to right, #83e4db 0%, #6ea2e2 90%, #956ee2 100%);

例2と同じ色を使っていますが、色が変化する位置が異なっています。

応用編

ただグラデーションにするだけではなく、位置が指定できるのを利用して柄を作ることもできます。

縞模様

位置の指定を使って、縞模様を描くこともできます。

background: linear-gradient(to right, #eee, #eee 25px,#999 25px, #999 50px, #eee 50px, #eee 75px, #999 75px, #999 100px, #eee 100px, #eee 125px, #999 125px);

しかし、これだと面倒なのでrepeating-linear-gradientを使うともっと楽になります。

background: repeating-linear-gradient(to right, #eee, #eee 5px, #999 5px, #999 10px);

もしくは、background-sizeを指定して繰り返す方法もあります。

.example {
  background: repeating-linear-gradient(to right, #eee, #eee 50%, #999 50%, #999);
  background-size: 10px 10px;
}

こちらも同じ柄になります。

チェック柄

linear-gradientは複数重ねることができるので、チェック柄を作ることもできます。

複数のlinear-gradientはコンマで区切って指定します。

.pattern {
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(243,70,78,.5) 50%, transparent 50%), 
                    linear-gradient(rgba(243,70,78,.5) 50%, transparent 50%);
  background-size: 50px 50px;
}

ブラウザの対応状況

ブラウザの対応状況は、「Can I use」というサイトで確認することができます。

Can I use

以前はCSSでグラデーションを使う場合、各種ブラウザに対応するためにたくさんのが必要でしたが、今ではlinear-gradientはほとんどのブラウザが対応しています。

IE9以前は対応していませんが filterプロパティで対応させることができます。

とは言っても、IE9のシェアはかなり少なく、対応する必要性はほとんどありません。グラデーションがないからと言ってレイアウトが崩れるわけではないので、わざわざIE9に対応させる意味はないと思います。

便利なジェネレーター

わざわざ自力でCSSを書かずとも、CSSを自動で生成してくれるジェネレーターもあります。

デザインツールのように直感的に使えるので、CSSに慣れていない人でも楽に使うことができます。

Ultimate CSS Gradient Generator

まとめ

色鮮やかで美しいサイトを作るのに取り入れたいグラデーションですが、初心者だとどうしても微妙な感じになってしまがちです。

前半部分の解説を参考にして、色んな組み合わせを試してみると良いでしょう。

また、グラデーションを効果的に活用したサイトもたくさんあるので、それらの組み合わせを参考にしてみるのもいいでしょう。