CSSのグラデーション（linear-gradient）の使い方を総まとめ！

この記事では、「背景」や「ボタン」などWebページの様々な部分にCSSでグラデーションをかける方法を紹介していきます。

1. CSSでのグラデーションのかけ方

CSSでグラデーションをかけるときには、backgroundプロパティに対して以下のような指定をします。色の変化が線形か円形かで書き方が変わります。

線形（直線）

background: linear-gradient(ここに色を指定);例：body { background:linear-gradient(#F89174, #FFC778); }

円形

background: radial-gradient(ここに色を指定);例：body { background:radial-gradient(#F89174, #FFC778); }

色指定の書き方については後ほど説明します。とりあえずCSSでグラデーションをかけたければ「background:◯◯-gradient（色指定）」という書き方をするのだと覚えておいてください。

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

linear-gradient()とradial-gradient()は、現在の主要ブラウザでは標準構文で使えます。以下は公開当時の対応表で、旧プレフィックスや別構文を含む歴史的な資料です。表のバージョンでこの記事の全構文がそのまま動くという意味ではありません。

下段は、旧記事が対応開始として挙げた各バージョンのリリース年です。特に古いWebKitの対応には、現在のlinear-gradient()とは異なる-webkit-gradient()構文も含まれます。

2018年時点の対応率：約95%

上の数字はCANIUSEによる2018年1月時点の対応ブラウザ利用率です。公開当時の参考図として残しており、現在の利用率ではありません。

IE9以下に対応する場合

以下はIE6〜9向けに使われていた独自filterの歴史的な参考です。現在の標準グラデーションを実装するためのコードではありません。

filter:progid:DXImageTransform.Microsoft.Gradient(ここに色を指定) 

何とも物騒な書き方ですね…。ただし、この書き方では「3色以上の指定」や「斜めにグラデーションをかけること」はできません。どうしてもIE9以下に対応しなければならない場合を除き、使わないのが無難でしょう。

現在は標準構文を使う（旧プレフィックスの補足）

ベンダープレフィックスの説明はこちら、対応状況はCANIUSEを参照できます。現在の主要ブラウザ向けには標準構文を使います。以下のプレフィックス付き構文は公開当時の参考として残しています。

background: -moz-linear-gradient(~);
background: -webkit-linear-gradient(~);
background: linear-gradient(~); 

3. CSSのlinear-gradientの書き方

それでは、具体的なCSSの書き方を見ていきましょう。

基本的な書き方

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

標準構文では、カッコのはじめに色が変わる方向を指定します。前節には公開当時のプレフィックス付き構文を歴史的な参考として残しています。旧構文は開始側を指定するため標準構文と向きの書き方が異なります。実演と現在使うコードは標準構文へ揃えます。

上から下にグラデーション

まずは上から下に「オレンジ（#FFC778）→白（#FFF）」のグラデーションをかけてみましょう。

<div id="sample">
	SAMPLE
</div>

#sample {
  background: linear-gradient(to bottom, #FFC778, #FFF);
}

標準構文のto bottomは下方向を表します。旧プレフィックス例のtopは開始位置を表していたため、同じ向きでも表記が違いました。

横向きにグラデーション

次に方向を左から右に変えてみます。

#sample {
  background: linear-gradient(to right, #FFC778, #FFF);
}

標準構文はto rightで右方向を指定します。旧プレフィックスのleftは開始側の指定でした。

色が変わる位置を変える

色の変わる位置を変えたいという場合もあるかと思います。そんなときは、色コードの横に半角スペースで区切って位置を%指定します。
例えば「橙色の面積を広めにしたい」という場合には以下のように書きます。

#sample {
  background: linear-gradient(to right, #FFC778 50%, #FFF);
}

0〜50%までは橙色で塗られ、50〜100%（終了位置）までがグラデーションになるわけですね。

4. 色の変化を「3色」以上にする

3色以上使う場合は、カンマで区切って色を書き足します。位置の%指定は任意です。省略したstopは前後の指定位置などに基づいて自動配置されます。ここでは色が変わる位置を分かりやすくするため、30%を指定する例を使います。

background: linear-gradient(to bottom, #FFF, #FFC778 30%, #F89174);

色コードと%の間は半角スペースで区切ります。開始色と終了色の指定の仕方はさきほどと同じです。

このようなイメージですね。「◯◯%の位置で◯◯色にする」というように決めるというわけですね。

これにより「開始位置（0%）から30%までは白から橙色への変化」かつ「30%から終了位置（100%）までは橙色から朱色への変化」というような指定になるのです。

4色にする例

例として4色のグラデーションを作ってみたいと思います（白→橙→朱→紫）。方向は上から下にします。

#sample {
  background: linear-gradient(to bottom, #FFF, #FFC778 30%, #F89174 60%, #748af8);
}

図にしてみました。位置（%の値）は自分の好みで変えることができます。

5. 斜めにグラデーションをかける

斜めにする方法は、標準構文で「to bottom right」のように角へ向かう方向を指定する方法と、degで角度を指定する方法があります。旧プレフィックスでは開始側を指定していました。

斜めにする方法1：右下など角へ向かう方向を指定する

上の例のように、左上から右下に向かってグラデーションをかけたいときには、下のように書きます。

background: linear-gradient(to bottom right, #FFF, #FFC778);

標準構文ではto bottom rightと半角スペースで区切り、右下へ向かう方向を指定します。旧構文のtop leftは開始側を表していた参考例です。

斜めにする方法2：角度を指定する

2つ目は角度をdegで指定する方法です。現在の例は標準構文で説明します。旧プレフィックスとの角度換算は、後に歴史的な参考として残しています。

角度（deg）の書き方

background: linear-gradient(25deg, #FFF, #F89174);

角度は上記のように、カッコ内の一番はじめに書きます。数字の後にはdegと書きます（degreeのdegですね）。このとき、to bottomなどの方向は書きません。

degはどうやって決める？

degの値とグラデーション角度の関係は、下の図のようになります。

0degだと下から上、値が大きくなると時計回りに方向が変わる、というイメージですね。

ベンダープレフィックスをつける場合

以下は旧-webkit-/-moz-構文の角度を標準構文へ対応させていた換算式です。現在の標準構文にこの換算を適用する必要はありません。

ベンダープレフィックス付のdeg ＝ 90 - 通常のdeg

旧プレフィックス付きの角度指定では、標準構文の25degに対して90-25で65degとしていました。現在用のコードでは換算せず標準構文の25degを指定します。

background: linear-gradient(25deg, #F13F79, #FFC778);

下の実演は標準構文の25degを使い、現在用のコード候補と同じ方向にしています。

6. CSSでの円形グラデーションのかけ方

radial-gradientの書き方

linear-gradientと考え方はほとんど同じです。

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

以下は公開当時の例を標準radial-gradient()に直した現在用コードです。旧プレフィックスは現行実装には不要です。

実際の例

#sample {
  background: radial-gradient(#F13F79, #FFC778);
}

カッコのはじめに「中央の色」を書き、カンマで区切って「外側の色」を書きます。簡単ですね。

色の変わる位置（%）まで指定する例

#sample {
  background: radial-gradient(#F13F79 20%, #FFC778 70%);
}

中心から基準線に沿った0〜20%は#F13F79、20〜70%はグラデーション、70%以降は#FFC778です。%は放射方向の基準線に沿う位置で、円の面積比ではありません。

複数色の円形グラデーションをかける

複数の色を指定したい場合もlinear-gradientと書き方はほとんど同じです。色を変えたい順にカンマ区切りで色指定を並べます。

#sample {
  background: radial-gradient(#FFF, #FFC778 40%, #F13F79);
}

中心から0〜40%で「白→橙」に、40〜100%で「橙→赤」にグラデーションがかかっています。

7. グラデーションの片側を透明に

CSSのgradient関数では、「#F18974」のようなHEXだけでなく、色名（例：orange）やRGBAで色指定することもできます。

グラデーションの片側を透過させたい場合には、透明（transparent）や半透明（rgba(5,5,5,0.1)など）を指定すればOKです。

片側を透明にする例

「橙→透明」のグラデーションをかけてみます。分かりやすくするために背景はグレイにしておきます。

#sample {
  background: linear-gradient(to bottom, #FFC778, transparent);
}

transparentが指定されているため、段々と透明になり、背景のグレイが見えているわけですね。

片側を半透明にする例

今度は「橙→半透明の赤」のグラデーションをかけてみます。背景は同じようにグレイにしておきます。

#sample {
  background: linear-gradient(to bottom, #FFC778, rgba(255, 0, 0, 0.1));
}

RGBAのalpha 0.1は不透明度10%の赤です。終了位置でも背景のグレイが透け、赤と混ざって見えます。

参考：RGBAの値はどうやって調べる？

RGBAカラージェネレーターを使うと良いでしょう。
また、Googleクロームのデベロッパーツールを使って、調べることもできます。デベロッパーツールの使い方はこちらの記事で解説しています。

8. 写真にグラデーションを重ねる（オーバーレイ）

半透明のグラデーションを画像の上に重ねるような表現も美しいですね。いわゆる「グラデーションオーバーレイ」と呼ばれるものです。

gradientの後にカンマ区切りでurl()を指定

グラデーションオーバーレイの方法は簡単で、gradient()の後にカンマ区切りでurl(画像のパス)を指定します。背景画像が見えるように、グラデーションは半透明なものを指定しましょう。

background: linear-gradient(25deg, rgba(255, 0, 0, 0.4), rgba(0, 255, 0, 0.4)) ,url(画像のパス);

background-size: coverは縦横比を保って要素全体を覆うため、画像の一部が切り取られる場合があります。先に書いたグラデーションが、後に書いた写真より手前に重なります。下のコードの../images/pic.jpgは、自分で用意した写真のパスへ置き換える例です。掲載画像は公開当時の完成結果であり、この画像へもう一度グラデーションを重ねるものではありません。

実際の例

以下のようなものを作ってみたいと思います。degを使って斜めの半透明グラデーションをかけます。

<div id="sample">
	OVERLAY
</div>

#sample {
  background: linear-gradient(25deg, rgba(255, 190, 44, 0.4), rgba(255, 44, 171, 0.7)), url(../images/pic.jpg);
  background-size: cover;
  height:200px; line-height:200px; text-align:center; color:#FFF;
}

コードが恐ろしく長くなってしまうのが難点ですね…。

9. CSSジェネレーターを活用しよう

ここまでCSSでのグラデーションの指定方法を紹介しました。以下は公開当時に紹介していたジェネレーターと画面例です。現在の操作や提供状況は各サービスで確認してください。

Shapy

とっても便利なグラデーションCSSジェネレーター見つけた。
色、角度、形、大きさを変えられるのはもちろん、複数のグラデーションを重ねることもできる

Shapy | Gradient Generatorhttps://t.co/jY22TUNq9F pic.twitter.com/LT6L5eXfcr

— CatNose (@catnose99) 2018年12月14日

【2018年12月追記】 Shapyという柔軟性が高く、ものすごく使いやすいCSSグラデーション・ジェネレーターを見つけたので追加しておきます。

Ultimate CSS Gradient Generator

プリセットの中から使いたいグラデーションを選べばCSSが表示されます。色や、色の変わり方まで微調整ができてとても便利です。

見てみる

CSS Matic Gradient Generator

公開当時は、上のジェネレーターと似た機能を持つ選択肢として紹介していました。掲載URLは現在404のためリンクを外しています。旧画面と説明は参考として残します。

見てみる

Shade

より直感的に美しいグラデーションを作成できるサイトです。どんな配色にするかまだ決めていないときに使うのがおすすめです。

見てみる

10. グラデーションサンプルが見つかるサイト

次に美しい配色のグラデーションサンプルを探すのにおすすめのウェブサイトを紹介します。どれもCSSのコピペで実装ができます。

WebGradients

透明感のある美しいサンプルが180個並んでいます。個人的にもよくお世話になっているサイトです。

見てみる

uiGradients

左右の矢印をクリックすることで、グラデーションアイデアが次々と表示されます。shiftを押せば、一覧が表示されます。

見てみる

11. CSSでグラデーションを背景に

「Webページの背景にグラデーションをかけたい」という場合も多いかと思います。縦に長いページの場合、美しくメリハリのある色変化にするために、背景グラデーションは固定するのがおすすめです。
固定の方法は少し奥が深いので、別の記事にまとめました。

12. CSSでグラデーションボタンを作ろう

グラデーションを利用したボタンデザインのサンプルはCSSのコピペで実装できるグラデーションボタンで紹介しています。是非、目を通してみてください。

Instagramのブランドデザインのように、複数のグラデーションを重ねる方法はCSSでInstagramフォローボタンを作るで解説しています。

13. グラデーションをCSS3アニメーションで変化させる

#sample { height:200px; line-height:200px; color:#FFF; text-align:center; vertical-align:middle; font-family:Quicksand; font-size:30px; background-color:#F89174; animation:a26-color 6s infinite; } @keyframes a26-color {0% {background-color:#F89174} 30% {background-color:#FFC778} 75% {background-color:#ff7897} 100% {background-color:#F89174}} @media (prefers-reduced-motion:reduce) { #sample { animation:none; } }

こちらはbackground-colorの単色を変化させるアニメーションです。グラデーション画像同士を補間しているわけではありません。

#sample { height:250px; line-height:250px; color:#FFF; text-align:center; vertical-align:middle; font-family:Quicksand; font-size:30px; background:linear-gradient(45deg, #ff78d5, #F89174, YELLOW); background-size:600% 600%; animation:a26-position 6s ease infinite; } @keyframes a26-position {0% {background-position:0% 50%} 50% {background-position:100% 50%} 100% {background-position:0% 50%}} @media (prefers-reduced-motion:reduce) { #sample { animation:none; } }

こちらはグラデーションのbackground-positionを動かすアニメーションです。背景画像そのものの色stopを補間しているわけではありません。

旧記事では「CSSで背景グラデーション+アニメーションで変化する背景色-WebLifeTimes」を参考として紹介していました。掲載URLは現在404のためリンクを外しています。上の2種類の実演と説明は残しています。