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

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

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

linear-gradientの使い方

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

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

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

これはbackgroundradial-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-gradientradial-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-gradientradial-gradientの細かいことがわからなくても大丈夫。
グラデーションの色を試しながらコードも生成してくれる、ジェネレーターというものがあります。

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

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

まとめ

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

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

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

Writer

ナナミ

株式会社SAMURAI

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら