先生と生徒の会話形式で理解しよう

生徒

「CSSで背景をグラデーションにすることってできますか？」

先生

「はい、CSSのbackground-imageプロパティを使えば簡単にできますよ。」

生徒

「どんなグラデーションが作れるんですか？」

先生

「よく使うのはlinear-gradient（リニアグラデーション）とradial-gradient（ラジアルグラデーション）ですね。それぞれ見ていきましょう。」

1. CSSのlinear-gradientで直線的なグラデーションを作る方法

まずはlinear-gradient（リニアグラデーション）から説明します。これは、ある方向に向かって色がなめらかに変化する背景です。たとえば、上から下に向かって青から白に変わるような背景が作れます。

linearは英語で「直線的な」という意味です。gradientは「だんだん変わっていくこと」。つまり直線的に色が変わっていく背景のことを指します。

下記は、水平方向（左から右）に青から白へグラデーションする例です。


<style>
    .gradient-box {
        width: 300px;
        height: 150px;
        background-image: linear-gradient(to right, blue, white);
        border: 1px solid #000;
    }
</style>

<div class="gradient-box"></div>

ブラウザ表示

このように、linear-gradient(to right, blue, white)と書くことで、左から右に向かって青から白へのグラデーションができます。

2. CSSのradial-gradientで円形のグラデーションを作る方法

次に、radial-gradient（ラジアルグラデーション）です。これは円形に広がるように色が変わる背景です。

radialは「放射状の」という意味なので、中心から外側へ色が広がるように変化します。

以下は、中央から水色から白へとグラデーションする例です。


<style>
    .radial-box {
        width: 300px;
        height: 150px;
        background-image: radial-gradient(circle, skyblue, white);
        border: 1px solid #000;
    }
</style>

<div class="radial-box"></div>

ブラウザ表示

このように、radial-gradient(circle, skyblue, white)と書くと、真ん中から円のように広がるグラデーションができます。

3. グラデーションの方向や位置を変えてデザインの幅を広げよう

linear-gradientでは方向を変えることができます。たとえば、右下に向かって色を変化させるには、次のように書きます。


<style>
    .diagonal-gradient {
        width: 300px;
        height: 150px;
        background-image: linear-gradient(to bottom right, red, yellow);
        border: 1px solid #000;
    }
</style>

<div class="diagonal-gradient"></div>

ブラウザ表示

to bottom rightと指定することで、左上から右下にかけて色が変化します。

4. 複数の色を使ってカラフルなグラデーションにする方法

グラデーションは2色だけでなく、3色以上を使ってカラフルにすることも可能です。たとえば、青→緑→黄色と順番に色を変えるグラデーションも簡単にできます。


<style>
    .multi-color-gradient {
        width: 300px;
        height: 150px;
        background-image: linear-gradient(to right, blue, green, yellow);
        border: 1px solid #000;
    }
</style>

<div class="multi-color-gradient"></div>

ブラウザ表示

このように、カンマ（,）で色を区切ることで、いくつもの色を段階的に変化させることができます。

5. 背景にグラデーションを使うときの注意点

グラデーション背景を使うと、見た目がおしゃれでプロっぽくなりますが、以下のような注意点もあります。

文字とのコントラストが足りないと読みにくくなる
派手すぎる色の組み合わせは目がチカチカする
アクセシビリティ（誰でも見やすくする工夫）にも気をつける

たとえば白い文字を使うなら、背景が濃いグラデーションになるよう調整すると良いです。逆に背景が明るいなら文字は黒や濃いグレーにすると、はっきり読めます。

6. CSSで背景をグラデーションにする場面の例

グラデーション背景は、Webサイトの見出しやボタン、セクション区切りなど、さまざまな場所で活躍します。

見出しを目立たせる
おしゃれなボタンの背景にする
ページの上部に印象的な背景を作る

たとえば、トップページの上部に大きくグラデーションを使えば、ユーザーの目を引く効果があります。

まとめ

CSSグラデーション背景の基本をしっかり振り返ろう

この記事では、CSSを使って背景をグラデーションにする方法として、linear-gradientとradial-gradientの使い方を中心に解説してきました。グラデーション背景は、単色の背景に比べて視覚的な情報量が多く、Webページ全体の印象を大きく変えることができます。特にCSSだけで実現できる点は大きなメリットで、画像を用意しなくても、美しくなめらかな背景表現が可能になります。

linear-gradientは、直線的に色が変化するグラデーションで、上から下、左から右、斜め方向など、方向を自由に指定できるのが特徴です。見出しの背景やセクションの区切り、ボタンの装飾など、さまざまな場面で活用されています。一方、radial-gradientは中心から外側に向かって色が広がる円形のグラデーションで、やわらかい印象や立体感を演出したいときに向いています。どちらもCSSのbackground-imageプロパティを使う点は共通しており、基本構文を覚えておくことで応用の幅が広がります。

複数色や方向指定でデザインの表現力を高める

CSSのグラデーションは、二色だけでなく三色以上を指定することもできるため、より複雑で表情豊かな背景を作ることができます。色をカンマで区切って順番に指定するだけで、なめらかに色が切り替わる背景が完成します。また、linear-gradientでは「to right」や「to bottom right」のように方向を指定することで、デザインの印象を細かく調整できます。こうした指定を使い分けることで、同じ色の組み合わせでも、まったく違った雰囲気のWebデザインに仕上げることができます。

ただし、グラデーション背景を使う際には、文字の読みやすさにも十分注意する必要があります。背景が明るすぎたり、色の変化が激しすぎたりすると、文字が埋もれてしまい、ユーザーにとって読みにくいページになってしまいます。文字色とのコントラストを意識し、必要に応じて背景の上に半透明のレイヤーを重ねるなどの工夫をすると、見た目と読みやすさを両立できます。

グラデーション背景の総合サンプル

ここで、これまで学んだ内容を踏まえたグラデーション背景のサンプルを確認してみましょう。 linear-gradientとradial-gradientを使い分けることで、セクションごとに異なる雰囲気を演出できます。


<style>
.section-linear {
    padding: 40px;
    color: white;
    background-image: linear-gradient(to right, #1e90ff, #00ced1);
}
.section-radial {
    padding: 40px;
    color: #333333;
    background-image: radial-gradient(circle, #ffffff, #add8e6);
}
</style>

<div class="section-linear">
    <h2>リニアグラデーションの背景</h2>
    <p>横方向に色が変化する、はっきりした印象の背景です。</p>
</div>

<div class="section-radial">
    <h2>ラジアルグラデーションの背景</h2>
    <p>中心から外側に向かって広がる、やわらかい印象の背景です。</p>
</div>

ブラウザ表示

このように、CSSのグラデーション背景を理解して使い分けることで、Webページ全体のデザイン性を大きく向上させることができます。初心者の方でも、まずは基本的な構文を真似しながら試してみることで、自然と使い方が身についていきます。色の組み合わせや方向指定を工夫しながら、自分なりのデザイン表現に挑戦してみましょう。

先生と生徒の振り返り会話

生徒

「CSSだけで、こんなにきれいなグラデーション背景が作れるとは思いませんでした。 linear-gradientとradial-gradientの違いも、だいぶ分かってきました。」

先生

「それは良いですね。グラデーションはCSSデザインの中でも、覚えるとすぐに効果を実感できる技術です。」

生徒

「方向を変えたり、色を増やしたりするだけで、印象が大きく変わるのが面白いです。」

先生

「その通りです。ただし、見た目だけでなく、文字の読みやすさも忘れずに考えることが大切ですよ。」

生徒

「これからは、見出しやセクションの背景にグラデーションを使って、デザインにメリハリをつけてみます。」

先生