今回はCSSを使ってウェブサイトの背景に美しいグラデーションをかける方法を解説します。以下の2パターンの方法に分けて解説します。

  1. ページの上から下まで全体の背景にグラデーションをかける
  2. 画面に表示される部分の背景にグラデーションをかける（スクロールしても固定）

1. ページ全体に縦のグラデーションをかける方法

この方法のイメージを図にしてみました。

全体にグラデーションをかける

ページ全体（body）の高さに合わせてグラデーションを描きます。同じ２色でも、ページが長いほど同じ距離での色の変化は緩やかになります。以下のコードでは、短いページも画面の高さ以上になるようにします。

CSSコード

グラデーションを生成するCSS関数linear-gradient()を、background-imageの値に指定します。以下は、ページの上から下へ色が変化するコードです。margin: 0でbodyの初期余白をなくし、min-height: 100vhで最低限の高さを確保しています。

CSSコード
body {
  margin: 0;
  min-height: 100vh;
  background-color: orange;
  background-image: linear-gradient(to bottom, gold 0%, orange 100%);
}

これをブラウザ表示すると…

以下のようにコンテンツのある部分全体にグラデーションがかかります。

グラデーション

１番上のカラーはgold（色名で指定してます）で、下にかけてorangeへ近づいていきます。※ このgifアニメーションだとカクカクして見えますが、実際の表示はなめらかなグラデーションとなっています。

コードの解説

上のコードから解説していきます。

CSSコード
background-color: orange;

↑これは単色の下地です。グラデーション画像を表示できない場合も、この背景色が残ります。

CSSコード
background-image: linear-gradient(to bottom, gold 0%, orange 100%);

↑標準の書き方です。現在の主要ブラウザでは、この基本的なグラデーションにベンダープレフィックスは不要です。gold 0%は「１番上のグラデーションの始まりがgold色」ということを示しています。orange 100%は「１番下のグラデーション終わりがorange色」ということを示しています。もちろん「#F89174 100%」のようにカラーコードで書いてもOKです。

CSSコード
background-image: linear-gradient(to right, gold 0%, orange 100%);

↑to rightなら左から右へ変化します。旧記事にあったIE専用filterは現行のコード例から外しました。グラデーションの方向は、このように関数の最初の引数で指定できます。

CSSコード
background-image: linear-gradient(to bottom, gold 0%, orange 100%);

↑これが正規の指定です。to bottomは上から下ということを表しています。例えばこれをto rightとすれば左から右にグラデーションがかかります。

2. グラデーションの背景を固定する方法

次に表示される画面内でグラデーションをかけ、スクロールしても固定する方法を紹介します。

グラデーションを固定

2-1. サンプル

たとえばサルワカで以前制作した「Typography World」では、スクロールしてもグラデーションが固定されるようにしていました。元ページは現在公開されていませんが、当時の表示を保存したGIFを掲載します。

例

CSSコード

以下は、背景専用の疑似要素を画面に固定し、本文より後ろに表示するコードです。htmlやbodyにtransformやfilterなどを指定している場合は、固定配置の基準や重なりが変わることがあるため、既存のCSSと合わせて確認してください。

CSSコード
body {
  margin: 0;
  min-height: 100vh;
  isolation: isolate; /* 背景をbodyの重なりの中に保つ */
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* 本文の背面 */
  pointer-events: none; /* クリックを妨げない */
  background-color: #f89174;
  background-image: linear-gradient(to bottom, #ffc778 0%, #f89174 100%);
}

ブラウザで表示すると…

コードをブラウザで表示した例

このようにグラデーションが画面の上から下にかかっています。スクロールしても背景のグラデーションは固定されたままです。

解説

body::afterで画面サイズいっぱいの擬似要素を作り、それに対してグラデーションをかけています。

CSSコード
body {
  margin: 0;
  min-height: 100vh;
  isolation: isolate;
}

↑bodyの高さを最低でも画面の高さにし、長い本文では自然に伸びるようにします。固定背景の大きさは、この高さではなく疑似要素のposition: fixedとinset: 0で決まります。isolation: isolateは、背景の疑似要素をbodyの重なりの中に保つ指定です。

CSSコード
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::after（疑似要素）を画面の四辺に固定します。z-index: -1で本文の背面へ置き、pointer-events: noneでリンク等のクリックを妨げないようにします。この解説用断片に、続く背景色とグラデーションを組み合わせたものが上の完成コードです。

CSSコード
background-color: #f89174;

↑１つめの方法と同じく、背景画像の下に敷く単色を指定しています。

CSSコード
background-image: linear-gradient(to bottom, #ffc778 0%, #f89174 100%);

↑上から下へのグラデーションです。0%が上端の色、100%が下端の色です。向きを変えるにはto topやto rightへ変更します。上下の色を逆にするには、始点と終点の色を入れ替えます。方向についてはさきほどの例も参照してください。

なぜ背景用の疑似要素を作るの？

背景専用の固定疑似要素を使うと、本文の長さから独立した画面サイズの背景を作れます。bodyの高さを100%にするだけでは背景は固定されません。背景画像を固定するbackground-attachment: fixedとは別の方法です。スマートフォンではブラウザのバーや表示領域の変化もあるため、対象端末でスクロール中の見え方を確認してください。

3. 対応ブラウザ

この記事は標準の基本的なlinear-gradient()を使います。旧記事の最低バージョン・発売年の表を、現在使う際の確認事項に更新しました。

プロパティIEChromeSafariFirefoxOperaiOSAndroid
標準の基本記法対象外対応対応対応対応Safariで対応Chrome等で対応
確認事項旧IE用コードは掲載しません対象の現行版で確認固定背景も確認対象の現行版で確認対象の現行版で確認実機でスクロール確認実機でスクロール確認

Chrome・Edge・Firefox・Safariなどの現在の主要ブラウザでは、この基本的な標準記法を利用できます。古いIE専用コードは掲載しません。基本記法への対応と、固定背景が対象端末で期待どおりに動くかは分けて確認しましょう。

この記事が参考になるかも

あわせて読みたいCSSのグラデーション（linear-gradient）の使い方を総まとめ！あわせて読みたいCSSの疑似要素とは？beforeとafterの使い方まとめ