HTML/CSSで背景グラデーションを実装！線形・円形・画像重ねテクニックを徹底解説

Webサイトのデザインを一気におしゃれに見せてくれる「グラデーション」。
しかし、「実装が難しそう」「画像を作らないといけないの？」と思っている方も多いのではないでしょうか。

実は、HTMLとCSSを使えば、画像ソフトを使わずにコードだけで美しいグラデーション背景を作ることができます。

色の変更や角度の調整も修正が簡単で、ページの読み込み速度への影響も少ないため、現代のWeb制作では必須のテクニックです。

この記事では、基本の「線形グラデーション」から「円形グラデーション」、さらには「背景画像の上にグラデーションを重ねる」応用テクニックまで、コピペで使えるコード付きで徹底解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

CSSでグラデーションを作る基本「linear-gradient」
ふんわり広がる円形グラデーション「radial-gradient」
1. 中心から外側へ色が変化する書き方
2. 正円（circle）を指定して形を整える
背景画像にグラデーションを重ねるおしゃれテクニック
1. rgba で透過色を指定して重ねる
配色に迷ったら？おすすめグラデーションジェネレーター3選
HTML/CSSのスキルを活かして年収を上げる方法

CSSでグラデーションを作る基本「linear-gradient」

Webサイトの背景色にグラデーションを指定する際、最もよく使われるのが linear-gradient（リニア・グラディエント）関数です。

これは「線形グラデーション」と呼ばれ、一直線上に色が変化していくスタイルを作ります。

基本的には、CSSの background プロパティ（または background-image）に値を設定するだけで実装可能です。

上下・左右に色が変化する基本の書き方

まずは最もシンプルな、2つの色が混ざり合うグラデーションを見てみましょう。

カッコ内に「開始色」と「終了色」を指定するだけで、自動的に上から下へのグラデーションになります。

/* 上から下へ（デフォルト） */
.gradient-box {
    background: linear-gradient(#33ccff, #ff99cc);
}

色の変化する方向を変えたい場合は、色の指定の前に to 方向 を記述します。

/* 左から右へ */
.gradient-box-right {
    background: linear-gradient(to right, #33ccff, #ff99cc);
}

/* 左上から右下へ */
.gradient-box-diagonal {
    background: linear-gradient(to bottom right, #33ccff, #ff99cc);
}

角度（deg）を指定して斜めのグラデーションを作る

方向をより細かく指定したい場合は、「deg（度数）」を使います。
時計回りに角度が適用されるため、デザインの微調整に非常に便利です。

0deg：下から上へ
90deg：左から右へ
180deg：上から下へ（デフォルトと同じ）
45deg：左下から右上へ

/* 45度の角度で斜めに */
.gradient-deg {
    background: linear-gradient(45deg, #22c1c3, #fdbb2d);
}

3色以上を使って複雑な色合いを表現する

グラデーションは2色だけでなく、カンマで区切ることで3色、4色と好きなだけ色を追加できます。
虹色のような表現も、CSSだけで簡単に作ることが可能です。

/* 3色を使ったグラデーション */
.gradient-multi {
    background: linear-gradient(to right, #ff0000, #ffff00, #0000ff);
}

色と色の間に「%」を指定することで、色が変化する位置（カラーポイント）を調整することもできます。

指定しない場合は等間隔になりますが、特定の色を広くとりたい場合などに有効です。

ふんわり広がる円形グラデーション「radial-gradient」

直線的な変化ではなく、中心から外側に向かってふんわりと色が広がる表現には radial-gradient（ラジアル・グラディエント）を使います。

スポットライトのような効果や、柔らかい印象を与えたい背景に適しています。

中心から外側へ色が変化する書き方

基本的な書き方は linear-gradient と似ていますが、デフォルトでは要素の中心から楕円状に色が広がります。

/* 基本の円形グラデーション */
.radial-box {
    background: radial-gradient(#ffffcc, #ff6666);
}

正円（circle）を指定して形を整える

要素が長方形の場合、デフォルトではグラデーションも楕円になります。

これを綺麗な「正円」にしたい場合は、circle という値を先頭に追加します。

/* 正円のグラデーション */
.radial-circle {
    background: radial-gradient(circle, #a8e063, #56ab2f);
}

また、グラデーションの中心位置をずらしたい場合は at 横の位置縦の位置 を指定します。

/* 左上を中心にグラデーション */
.radial-at {
    background: radial-gradient(circle at 20% 30%, #ffffff, #000000);
}

背景画像にグラデーションを重ねるおしゃれテクニック

Webデザインで頻繁に使われるのが、「写真の上に半透明のグラデーションを重ねる」テクニックです。

これにより、画像の上の文字が読みやすくなったり、サイト全体のトーンを統一したりすることができます。

rgba で透過色を指定して重ねる

画像を背景にする url(...) と、グラデーションの linear-gradient(...) は、カンマ区切りで複数指定することができます。

このとき、先に書いた記述が上に表示されるというルールがあります。

ポイントは、グラデーションの色指定に rgba（赤, 緑, 青, 透明度）などを使い、色を透過させることです。

.image-overlay {
    /* グラデーションを先に書く（上に重ねるため） */
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)),
        url("background.jpg");
    
    /* 背景画像のサイズ調整など */
    background-size: cover;
    background-position: center;
    color: #ffffff; /* 文字色を白に */
}

上記の例では、上部は薄い黒（透明度0.3）、下部は濃い黒（透明度0.8）のグラデーションを画像に重ねています。

こうすることで、画像の下の方に白いテキストを配置しても、くっきりと読みやすく表示されます。

配色に迷ったら？おすすめグラデーションジェネレーター3選

「技術的な書き方はわかったけれど、色の組み合わせのセンスに自信がない…」

そんな方のために、プロが作成した美しいグラデーションをコピペできる便利なツールを紹介します。

1. WebGradients

淡いパステルカラーや、今どきのフラットデザインに合う美しいグラデーションが180種類以上揃っています。
気に入ったデザインをクリックするだけでCSSコードがコピーできる手軽さが魅力です。

2. uigradients

画面全体でグラデーションのプレビューを確認できるサイトです。
力強い色合いから落ち着いたトーンまで幅広く、左右のキーボード矢印キーで次々と配色を切り替えて探すことができます。

3. CSS Gradient

自分で色を細かく調整したい場合に最適なツールです。
PhotoshopのグラデーションツールのようなUIで、スライダーを動かしながら直感的にCSSコードを生成できます。
線形・円形の両方に対応しており、コードを書くのが面倒な時にも重宝します。

HTML/CSSのスキルを活かして年収を上げる方法

以上、HTMLとCSSで背景色のグラーデーションを実現する方法について解説してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。