CSSで線形グラデーションを表現する為の設定方法。簡単な作成方法もご紹介

背景にグラデーションを使用してサイトを作成する事があると思います。backgroundにグラデーションチップの画像をリピートして表現する方法もありますが、CSSだけでも同様の事が実現できます。

このページではそんなCSSのグラデーション機能の中でも、最もよく使う線形グラデーションの使い方をご紹介します。また最後に簡単にCSSでグラデーションが作れるツールもご紹介します。

まずはグラデーションの基本的な記述方法を学ぶ

CSSでグラデーションを表現する場合はbackgroundプロパティで、linear-gradientを使用します。
linear-gradient内で、始点と終点の色を指定するだけで線形のグラデーションが表示されます。
background: linear-gradient(始点の色, 終点の色)と記述し、上から下のグラデーションが表現されます。

  background: linear-gradient(black, #089588);

グラデーションの方向を調整する

グラデーションの流れる方向を変更する事ができます。変更するにはlinear-gradientに角度の値を追加するだけです。値は「0deg」という形で入れ、数字は角度を表します。

0regが下から上、90degが左から右、180degは上から下、270degは右から左に流れます。
マイナス表記も可能で-90degは270degと同じ意味を持ちます。何もしていない場合（デフォルト）は180degです。

記述場所は下記のように最初に記述します。

  background: linear-gradient(90deg, black, #089588);

3色以上のグラデーションを表現する

2色の単調なグラデーションでは無く、複数の色を混ぜたグラデーションを作る事も出来ます。

指定の方法は簡単で、始点と終点の間に色指定を増やすと色が増えて行きます。色の配分は指定した色の数に応じて均等に配分されます。

  background: linear-gradient(90deg, black, pink, #089588);

もっとたくさんの色を指定する事ももちろん出来ます。それぞれが均等配置されたグラデーションが出来上がります。

  background: linear-gradient(90deg, black, #66633b,pink,#9156d9,#089588,#56df00);

色の配分を調整する

色の配分は指定した色の数に応じて均等に配分されると説明しましたが、その配分を変更して一方の割合を増やしたいという事もあるかと思います。

その場合の指定方法も存在ます。しての仕方は色指定の後ろに「30%」という形でパーセントを表記する事で色の変化具合を調整できます。

ここで注意点すべき点があります。パーセントは割合を表しているのでは無く、その色の開始地点からの位置を%で指定しています。
下記のようなコードの場合は、始点(この場合は左端）から30%の地点で「#089588」カラーが100%の状態となるグラデーションを作成するという意味になります。

  background: linear-gradient(90deg, black, #089588 30%);

背景にグラデーションを重ねたい時に使える透明度設定

デザインとして背景画像にグラデーションを重ねたいと言った時に使えるのが透明度の設定です。透明度を指定する事で背景が透けるので、背景画像を徐々にホワイトアウトする画像に見せたり、記事の一部を見せて残りを隠すという見せ方をしたい時に使えます。

透明度は指定するグラデーションカラーをrgbaを利用する事で実現します。rgbaは左から赤、緑、青、透明度を指定する方法です。
透明度は1が100%表示（不透明）、0が0%（透明）となり、間は小数点で表現します。

下記のコードは背景色が赤色の要素の上に、黒（透明度0.6）から緑色に変化するグラデーションを重ねた場合です。

#back {
  background: red;
}
#front {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), #089588);
}

ジェネレーターツールで簡単にグラデーションを作成する

CSSでグラデーションを作れるのはわかったけれども、イマイチ覚えられないという方や、色を調べたり何度もプレビューをして確認するというのが面倒な方に、楽にCSSグラデーションを実現する方法があります。
それはCSSジェネレーターツールを利用するという方法で、サイト上でプレビューを見ながら直感的にグラデーションを作成すると、そのグラデーションを表現する為のCSSの記述内容が自動で作れます。あとは、その記述をコピーして自身のCSSに貼り付けるだけでグラデーションを表現する事が出来ます。

個人的に利用するツールをご紹介します。ツールを探すのも面倒という人は一度覗いてみてください。
→ Ultimate CSS Gradient Generator

最後に

画像チップで背景グラデーションを表現する場合と、CSSのみで表現する場合のどちらが楽かは、分業の関係や自分の環境などで左右される部分もありますが、CSSで表現していると修正や微調整は楽だと個人的には感じています。

ここでは紹介しませんでしたが、円形グラデーションもありますし、ストライプ模様の表現などもできるので一つのスキルとして覚えておくのは良いかと思います。