1. TOP
  2. リファレンス
  3. CSSのグラデーションの使い方! 斜めや3色のサンプルあり

CSSのグラデーションの使い方! 斜めや3色のサンプルあり

CSSではlinear-gradient()関数radial-gradient()関数を使って、グラデーションを表現することができます。さっそくですが、簡単なグラデーションを見てみましょう。

<div id="demo_137"></div>
 #demo_137{
   /*   グラデーションの設定 */
   background: linear-gradient(tomato, royalblue);
   height: 300px;
 }

グラデーションが表示されました。

linear-gradient()関数radial-gradient()関数は、list-style-imageプロパティbackground-imageプロパティなど、画像を設定するプロパティに対して使用することで、そこにグラデーションを表示することができます。

画像を使わずにグラデーションが表現できるようになった

linear-gradientradial-gradientはCSS3で追加された比較的新しい関数で、これを使うことに画像を使わずにCSSだけでグラデーションを表現できるようになりました。

CSSだけで表現できるということは、画像を使うより容量が小さく済むので、表示までの時間が短縮できたり、拡大しても劣化することなく綺麗に表示することができます。

グラデーションを使ったおしゃれなサイトもどんどん増えてきているので、この記事で学んで取り入れてもらえればと思います。

線形グラデーションと、円形グラデーション

グラデーションには線形グラデーションと円形グラデーションがあります。

線形グラデーション

線形グラデーションを設定するには、linear-gradient関数を使います。

linear-gradient(角度, 開始色, 終了色);

角度はdegを使って数値で指定できる他、方向をキーワードで指定もできます。

角度の設定方法

下記のようなキーワードを使います。

  • to top
    上へ向かう
  • to right
    右へ向かう
  • こo bottom
    下へ向かう。 ←初期値です。
  • こto left
    左へ向かう

またキーワードを2つ組み合わせるこのによって、斜め方向への指定も可能です。

  • to top right…右上角へ向かう
  • to bottom right…右下角へ向かう
  • to bottom left…左下角へ向かう
  • to top left…左上角へ向かう

試しにキーワードを使ったシンプルなグラデーションを設定してみましょう。

シンプルな線形グラデーション

<div id="demo_138"></div>
 #demo_138{
   /*   グラデーションの設定 */
   background: linear-gradient(to right, tomato, royalblue);
   height: 300px;
 }

左から右に向かったグラデーションが作成出来ました。左端がtomato、右端がroyalblueのグラデーションになっていますね。

円形グラデーション

円形のグラデーションを設定するには、radial-gradientを使います。

background: radial-gradient(中央の色, 外側の色);

簡単な円形グラデーションの例を見てみましょう。

簡単な円形グラデーション

<div id="demo_139"></div>
 #demo_139{
   /*   グラデーションの設定 */
   background: radial-gradient(tomato, royalblue);
   height: 300px;
 }

中央がtomato、外側がroyalblueの円形のグラデーションができました。

これらがグラデーションの基礎になります。さらに詳細な指定も出来ます(後述します)が、簡単なグラデーションであれば、このように簡単に指定できてしまうんですね。

線形グラデーションのサンプル

グラデーションの実例を見ながら、どのように設定していくのかを学んで行きましょう。

斜めのグラデーション

斜めにグラデーションをかけるには、数値で角度を指定するか、斜め方向のキーワードを指定します。

キーワードで指定した例

<div id="demo_140"></div>
 #demo_140{
   /*   グラデーションの設定 */
   background: linear-gradient(to right top, tomato, royalblue);
   height: 300px;
 }

キーワードを右上にすることで、左下から右上に向かうグラデーションになりました。

数値で指定した例

数値の場合は角度をdegを使って指定します。例えば30度の場合は「30deg」となります。

<div id="demo_141"></div>
 #demo_141{
   /*   グラデーションの設定 */
   background: linear-gradient(30deg, tomato, royalblue);
   height: 300px;
 }

30degを指定することで、30度の角度のグラデーションを設定することが出来ました。

色のバランスを変えたグラデーション

現在は開始色から終了色までバランスよく色が変わるグラデーションですが、このバランスを変更することも出来ます。

変更するには、どの範囲までその色を適用するかを、%やpxを使って指定します。たとえば、全体の60%の位置まではtomato色にしたいという場合は下記のようにします。

<div id="demo_142"></div>
 #demo_142{
   /*   グラデーションの設定 */
   background: linear-gradient(to right, tomato 60%, royalblue);
   height: 300px;
 }

tomatoのあとに半角スペースを開けて、60%を指定しています。

こうすることで、開始位置から全体の60%の位置まではtomato色でそこから先はグラデーションとなります。

150pxのところまでtomato色にしたい場合は下記のように指定します。

background: linear-gradient(to right, tomato 150px, royalblue);

3色の線形グラデーション

3色以上を使ったグラデーションも作成することが出来ます。3色目以降もカンマ区切りで指定することで色を増やすことができます。

linear-gradient(角度, 開始色 位置あれば, 2色目 位置あれば, 3色目 位置あれば,…);

位置は指定しなければ均等なグラデーションになりますが、こだわりがある場合は指定するようにしましょう。

<div id="demo_143"></div>
 #demo_143{
  /*   グラデーションの設定 */
   background: linear-gradient(to bottom, tomato, royalblue 65%, black); 
  height: 300px;
 }

グラデーションが「tomato色→royalblue色→black」と変わって行きます。

royalblue 65%を設定しているので、開始位置から65%の位置がroyalblueになっていますね。

グラデーションを透過させる

グラデーションに指定する色には、透明を表すtransparentや、透明度をしていできるカラーコードのrgba()を使うことが出来ます。

rgba()は、red、green、blue、alphaの頭文字です。RGBはそれぞれの色のコードを指定し、最後のalphaには「1を不透明、0を完全な透明」とする数値を指定できます。

普段使っているカラーコードをrgbで指定する必要があるためめんどくさいですが、透明度を指定するにはこの方法しかないので、下記のようなサイトをうまく使って変換しましょう。

https://tech-unlimited.com/color.html

例えば、不透明度50%の黒い背景にしたい場合は、以下のように設定します。

background-color:rgba(0, 0, 0 ,0.5) ;

透明なグラデーションと画像を組み合わせてを使えば、おしゃれなサイトでよく使われているような効果を表現することも可能になります。

画像の上に、透明なグラデーション

<div id="demo_144">グラデーションなし</div>
<br>
<div id="demo_144-2">グラデーションあり</div>
 #demo_144{
   /*   グラデーションの設定 */
   background: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg"); 
   height: 300px;
 }

 #demo_144-2{
   /*   グラデーションの設定 */
   background: linear-gradient(to right, rgba(255, 99 , 71 , 0.5), rgba(65, 105, 225, 0.5)),url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg"); 
   height: 300px;
 }
グラデーションなし

グラデーションあり

backgroundにはカンマ区切りで、背景画像を複数指定できる点がポイントです。まず、グラデーションを半透明の色で作成し、2つ目の背景に画像を設定しています。

ぐっと雰囲気が変わりますね。

円形グラデーションのサンプル

色の位置を変えたグラデーション

線形グラデーションと同様に、色の位置を指定することができます。

<div id="demo_145"></div>
#demo_145{
   /*   グラデーションの設定 */
   background: radial-gradient(tomato 50%, royalblue);
   height: 300px;
 }

中心を開始位置として、50%の位置まではtomato色、そこから周りに向かってグラデーションとなっています。

3色の円形グラデーション

線形グラデーションと同様に、複数色を指定することが出来ます。

 <div id="demo_146"></div>
#demo_146{
   /*   グラデーションの設定 */
   background: radial-gradient(tomato 25%, royalblue 70%, black);
   height: 300px;
 }

中心を開始位置として、25%まではtomato色、そこから75%までは「tomato色 → royalblue色」のグラデーション、そこから終了位置までは「royalblue色 → black」へのグラデーションとなっています。

グラデーションの対応ブラウザ

以前に述べましたが、linear-gradient()とradial-gradient()はCSS3で登場した比較的新しい関数です。ブラウザの対応状況を確認する必要があります。

Image

https://caniuse.com/#search=linear-gradient

上記を確認すると、対応状況は95%を超えているので、問題なく使えると考えて良いでしょう。

ちなみに赤が非対応、緑が対応済みです。

赤になっているところは古いバージョンのブラウザばかりなので気にする必要はないでしょう。

どうしても古いブラウザでもなるべく表示したい!という人は、ベンダープレフィックスを使うとなんとかなる可能性は高いです。ベンダープレフィックスについては、この記事の解説の範疇を超えるので、解説記事などを調べていただくと出てくると思います。。

CSSジェネレーターの紹介

グラデーションはコード上で見ていてもイメージがつきにくいですよね。そんな時のために、直感的にグラデーションが作れる、ジェネレーターというものが用意されています。

このようなツールをうまく使って、思い通りのグラデーションを素早く作ると効率出来です。

Image

Ultimate CSS Gradient Generator

adobe系のソフトにインターフェイスが似ているので、慣れている人には使いやすいツールです。画面左側でスライダーを動かしてグラデーションを作ると、右側に自動的にCSSが出力されます。

他にもいろんなジェネレーターが用意されているので、探してみるのもよいですね。

まとめ

  • CSSではlinear-gradient()関数radial-gradient()関数を使って、グラデーションを表現する
  • linear-gradient()関数radial-gradient()関数は画像を設定するプロパティに対して使用する
  • グラデーションには線形グラデーションと、円形グラデーションがある
  • グラデーションは複数色を設定できる
  • グラデーションは透明を表すtransparentや、透明度をしていできるカラーコードのrgba()を使うことが出来る
  • 対応状況は95%を超えているので、問題なく使える