スライドショー

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-gradientradial-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だけでこれだけおしゃれな背景が作れると、なんだかわくわくしてきますね。

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説