MENU
  1. ホーム
  2. その他
  3. CSSで背景にグラデーションをかける方法を徹底解説

CSSで背景にグラデーションをかける方法を徹底解説

その他
侍エンジニア編集部

こんにちは！ライターのナナミです。

最近、素敵なグラデーション背景を使っているWEBサイトをよく見かけますね。

こんな感じのやつです。

gradation1

自分もグラデーションを使って素敵なWEBサイトを作りたい…なんて思っていませんか？

実はこれ、CSSでさくっと実装できちゃうんです。

ということで今回は、CSSのみで実装する背景グラデーションについてまとめました！

・グラデーションの付け方
・グラデーションの実装例
・実装時の注意点

のご紹介をしていきます。

背景にグラデーションをつけるだけで、WEBサイトが超おしゃれになります。
ガンガン使えるようになっちゃいましょう！

目次

今回の記事の基本ソースコード

今回の説明は下記のHTMLとCSSを基本に進めていきます。

HTML

<div class="background_test">
    <div class="logo_test">
        ロゴ
    </div>
</div>

CSS

.logo_test {                    /* ロゴ部分の指定 */
    text-align:  center;        /* 文字を中央揃え */
    padding: 10px;                /* 余白指定 */
    color:  #fff;                /* 文字の色指定 */
    border:  solid 1px #fff;    /* 枠線指定 */
    width: 220px;                /* 幅指定 */
    margin:  0 auto;            /* 中央寄せ */
    font-size: 40px;            /* 文字サイズ指定 */
}

.background_test {                /* 背景部分の指定 */
    padding: 180px;                /* 余白指定 */
}

線状のグラデーションをつける

グラデーションといえば、左から右に色が変わったり、上から下に色が変わったりするイメージですね。
一方向に向かって色の変化があるものを、線状グラデーションと言います。

gradation2.2

線状グラデーションは、backgroundにlinear-gradientという値をつけることで実装できます。

早速実装方法や例を見ていきましょう！

linear-gradientの使い方

linear-gradientはbackgroundの値の一つで、線状グラデーションを指定できるものです。

書き方はこんな感じです。

CSS

セレクタ {
    background: linear-gradient(色が変わっていく方向や角度, 開始色, 終了色));
}

カッコの中に、色が変わっていく方向や角度、そして色を指定することで、自由にグラデーションを作ることができます。

linear-gradientのリファレンスはこちら
http://www.htmq.com/css3/linear-gradient.shtml

背景に実装してみると…

gradation2.2
CSS

.background_test {
    background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
}

左から右に向かって色が変わっていくようになりました。
これだけでおしゃれになりますね！

実装例

グラデーションというと、青と薄水色とか、赤とオレンジとか、同系色の色を使うイメージがありますね。

しかし、グラデーションの魅力は何と言ってもその滑らかな混ざり具合。
下記の例のように、いろんな色で試してみるのがおすすめです！

いろんな色でグラデーション

gradation2

CSS

.background_test {
    background: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
}

ちょっとオーロラみたいな感じになりますね、おしゃれ！

3色以上でグラデーション

gradation2-2

CSS

.background_test {
    background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

こんな風に3色でも4色でも指定することができます。
色数が多かったりするとごちゃごちゃしてしまうので、注意してくださいね。

円状のグラデーションをつける

要素の周りから真ん中に向かってグラデーションしている状態を、円形グラデーションといいます。
真ん中らへんが円になるので、円形グラデーションです。

gradation3-1

これはbackgroundにradial-gradientを指定すれば実装できます。

radial-gradient

radial-gradientは、円形グラデーションを指定できるbackgroundの値です。

下記のように指定します。

CSS

.background_test {
    background: radial-gradient(形状や中心位置、開始色, 終了色);
}

値の名前以外は、linear-gradientとほぼ一緒です。
カッコの中で色などをを指定します。

形状や中心位置は、記述しなくても問題ありません。

radial-gradientのリファレンスはこちら
http://www.htmq.com/css3/radial-gradient.shtml

gradation3-1

CSS

.background_test {
    background: radial-gradient(rgb(169, 214, 255), rgb(0, 80, 159));
}

線状グラデーションとはまた違ったおしゃれ感！

真ん中に向かって変化するので、配色次第では真ん中をちょっと目立たせる感じにできますね。

実装例

線状グラデーションと同じく、配色や指定でいろいろな見栄えにすることができます。
一例を挙げてみますので、参考にしてみてください。

複数色指定

gradation3-3
CSS

.background_test {
    background: radial-gradient(#473B7B 0%, #3584A7 51%, #30D2BE 100%);
}

linear-gradientと同じく、複数の色を指定することも可能です。
メノウ石みたいな感じになりましたね。

ロゴを目立たせるグラデーション

gradation3-2

CSS

.background_test {
    background: radial-gradient(ellipse at center, rgba(96,171,248,1) 0%,rgba(155,201,247,1) 28%,rgba(155,201,247,1) 18%,rgb(255, 255, 255) 70%);
}

真ん中の色を濃くして、ロゴを際立たせるような配色なんかもできますね。

画像にグラデーションを重ねる

単純にグラデーションのみで背景を指定するのも十分おしゃれですね。
しかし、画像の上にグラデーションがかかっている背景はさらにおしゃれになります！。

gradation4-1

実はこれもCSSだけで実装できちゃうんです！

グラデーションと背景画像は同時指定ができる

グラデーションと背景画像は「,(カンマ)」で区切ると同時に指定することができます。

CSS

セレクタ {
    background: グラデーションの記述 ,背景画像の記述;
}

先に記述したものが最前面になり、後に並んだものは最初に指定した背景の後ろに配置されます。

この機能を使い、グラデーションと背景画像をいっぺんに指定すると…

gradation4-1

CSS

.background_test {
    background: linear-gradient(90deg, rgba(22, 135, 237, 0.6), rgba(20, 55, 90, 0.9)) ,url(test_img.jpg);
}

画像の上にグラデーションが乗っている背景ができました！
うーん、やはりグラデーションだけの背景よりもおしゃれ。

ポイントは、色の指定をRGBAで指定することです。

RGBAは、RGB（赤、緑、青の三原色のバランスを数値にしたもの）にプラスして、色の透明度を指定できるものです。

これでちょっと色を透明にして、下の写真が見えるようにしています。
色付きセロファンを重ねたような感じですね。

実装例

画像の上に乗せるグラデーションは、linear-gradientもradial-gradientも両方使えます。
これはかなり夢が広がりますね…！

一例を用意してみたので、参考にしてください。

カラフルな写真背景

gradation1

CSS

.background_test {
    background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%),url(test_img.jpg);
}

記事の冒頭に載せた画像も、CSSのみで作った画面でした。
色合いがまたおしゃれですね！

写真のまわりをちょっとぼかした感じにする

gradation4-3

CSS

.background_test {
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,1) 100%),url(test_img.jpg);
}

真ん中の色を透明に指定して、画像のまわりにちょっとぼかしが入っているようにしてみました。
ちょっといい雰囲気が出ますね。

オールドブラウザでの注意点

こんなおしゃれな背景を作れるlinear-gradientとradial-gradientですが、IE9以下は対応していません。

オールドブラウザも対象にしたサイトのときは、オールドブラウザ用に単色の背景を用意しておきましょう。

下記のように、グラデーション背景の前にbackgroundで単色を指定しておけばOKです。

CSS

.background_test {
    background: rgb(135,224,253);
    background: linear-gradient(to right, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
}

ジェネレーターで簡単実装!

コードのことはわかったけど、色の組み合わせとかわかんない…

色のイメージはあるんだけど、どう指定すればいいのかわからない…

組み合わせを色々試しながら作りたい…

そんなあなた、諦めないで！

inear-gradientやradial-gradientの細かいことがわからなくても大丈夫。
グラデーションの色を試しながらコードも生成してくれる、ジェネレーターというものがあります。

ジェネレーターを使えば色を選んでコードをコピペするだけ、とっても簡単です。

下記の記事が色々なジェネレーターを紹介しているので、参考にしてみてください。
https://www.indetail.co.jp/blog/css3-gradation/

まとめ

いかがでしたか？
CSSだけでこれだけおしゃれな背景が作れると、なんだかわくわくしてきますね。

色の組み合わせは無限大です。
ジェネレーターなども使って、どんどん試してみてください。

素敵な色の組み合わせがあったら、ぜひ教えてくださいね！

その他

この記事を書いた人

侍エンジニア編集部のアバター 侍エンジニア編集部

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

この著者の記事一覧へ
目次