注目キーワード

【CSS】グラデーションの使い方をサンプル付きで解説

  • 2025.03.25
       
【HTML/CSS入門】CSSでグラデーションをかける方法を徹底解説

WEBサイトを作成する際に、背景を単色ではなくグラデーションにしたいケースもあるかと思います。

そんなとき、皆さんはどうしますか？
グラデーションをかけた画像を用意して背景をbackground-imageプロパティで指定する…といった方法を使うこともあるかもしれません。

ですが、CSSには背景にグラデーションをかける機能が標準で備わっているので、画像を用意しなくてもグラデーションをかけることができます！

今回の記事では、CSSの機能を使用して背景色をグラデーションにする方法について解説していきたいと思います！

CSSのグラデーション機能の中では、方向や角度、形など様々な項目をカスタマイズすることができます。
それぞれの使い方について詳しく説明するので、ぜひ最後までご覧になってみてくださいね。

目次

CSSでグラデーションをかけるには？

CSSでグラデーションをかけるには、 background プロパティを使用します。このプロパティで背景を指定する際に、グラデーションをかけるための関数を入れることで、HTMLの要素にグラデーションをかけることができます。

使用する基本のHTML/CSS

今回は、下記のHTMLとCSSを基本に説明を行います。

【HTML】

<div class="sample_background">
    <div class="sample_title">
        <p>sample</p>
    </div>
</div>

【CSS】

.sample_title {
    padding: 0 24px;
    /* 要素内の余白指定 */
    margin: 0;
    /* 要素外の余白指定 */
    height: 25vh;
    /* 高さ指定 */
    color: white;
    /* 文字色の指定 */
    display: flex;
    /* 要素を並列に並べる */
    justify-content: center;
    /* flexアイテムの左右を中央寄せにする */
    align-items: center;
    /* flexアイテムの上下を中央寄せにする */
}
.sample_background {
    background: rgb(50 100 255);
    /* 背景色の指定 */
}

この段階での画面は以下のようなデザインになります。

sample

この 「sample_background」 クラスの背景色（background）の指定を、グラデーションに変更していきます。
ただし、今回紹介する方法はIE9以下には対応していないため、古いブラウザも対象に含む場合は単色の背景は残し、その下に別途でグラデーション背景を指定するようにしましょう。

線形グラデーションで直線状のグラデーションをかける

一方向に向かって色が変化するグラデーションのことを、線形グラデーションと言います。
CSSで線形グラデーションを指定したい場合は、backgroundに 「linear-gradient()」 という値を付けて実装しましょう。

具体例と共に、詳しい使い方について解説します。

linear-gradient()の使い方

「linear-gradient」 は、CSSで使用できる関数の1つで、線形グラデーションを指定することができます。
使用する際の基本構文は以下の通りです

【基本構文】

linear-gradient(方向もしくは角度, 開始色, 終了色);

色が変化する向きと、使用する色をそれぞれ指定することができます。
実際に使用すると、以下のような画面になります。

sample

【サンプルコード】

.sample_background {
    background: linear-gradient(20deg, red, blue);
}

赤から青へと変化するグラデーションを表示することができました。

上記のコードはカラーネームで色を指定していますが、カラーコードやRGB形式で指定することも可能です。
以下の2つのコードはどちらも、結果として上記のコードと同じ色を指定していることになります。

background: linear-gradient(20deg, #FF0000, #0000FF); /* カラーコード */
background: linear-gradient(20deg, rgb(255,0,0), rgb(0,0,255)); /* RGB */

線形グラデーションの方向を指定する

グラデーションの方向を指定するやり方には、2つの方法があります。
1つは、「to」 に続けて位置を示すキーワードを指定する方法です。

この方法では、水平方向の位置 (left もしくは right）と、垂直方向の位置 (top または bottom）をそれぞれ指定することができます。

例えば「to left」と指定した場合、右から左へと色が変化していくグラデーションになります。

【サンプルコード】

.sample_background {
    background: linear-gradient(to left, red, blue);
}

【表示結果】

sample

グラデーションの方向は、水平方向と垂直方向の指定を組み合わせることも可能です。
指定の順番はどちらが先でも構いません。

【サンプルコード】

.sample_background {
    background: linear-gradient(to left bottom, red, blue);
}

【表示結果】

sample

方向の指定は省略することも可能で、その場合は 「to bottom」 がデフォルトで指定されます。

線形グラデーションの角度を指定する

グラデーションの方向を指定するもう1つのやり方は、基準となるグラデーション軸の角度を数値で指定する方法になります。

「0deg」 の値は 「to top」 と結果が同じになり、値が増加するとそこから時計回りに回転します。

【サンプルコード】

.sample_background {
    background: linear-gradient(40deg, red, blue);
}

【表示結果】

sample

「to top」 と 「to bottom」 は 「0deg」 と 「180deg」、 「to left」 と 「to right」 は 「270deg」 と 「90deg」 の角度にそれぞれ対応しています。
値はマイナス値で指定することも可能で、その場合は反時計回りに回転します。

3色以上のグラデーションをかける

グラデーションに使用する色は、複数選択することもできます。
変化させたい順番に、色の指定を行いましょう。

【サンプルコード】

.sample_background {
    background: linear-gradient(0deg, red, yellow, lime, blue);
}

【表示結果】

sample

放射状グラデーションで円形のグラデーションをかける

直線的に色が変化する線形グラデーションに対し、放射状に色が変化するグラデーションのことを円形グラデーションといいます。
円形グラデーションを指定したい場合には、「radial-gradient」 関数を使用しましょう。

radial-gradient()の使い方

radial-gradientを使用する際は、以下のようにコードを記述します。

【基本構文】

radial-gradient(形状や中心の位置、開始色, 終了色);

linear-gradientではグラデーションの向きを指定していましたが、radial-gradientの場合はグラデーションの基準となる中心地点の位置や円の形を指定します。
色の指定方法についてはlinear-gradientと同じです。

例えば、色のみを指定した場合は、画面中央から広がる楕円形のグラデーションになります。

【サンプルコード】

.sample_background {
    background: radial-gradient(red, blue);
}

【表示結果】

sample

円の形を指定する場合は、 「circle(円)」 もしくは 「ellipse(楕円)」 で指定します。
中心の位置を指定する場合は、 「at」 の後ろに続けて px や ％ などの数値か、left や top などのキーワードで指定します。

【サンプルコード】

.sample_background {
    background: radial-gradient(circle at 20% 30%, red, blue);
}

【表示結果】

sample

扇形グラデーションで円周上にグラデーションをかける

続いて、扇形グラデーションを使用する方法について解説します。

先ほどの円形グラデーションが中心地点から放射状に広がるグラデーションだったのに対し、扇形グラデーションは、中心地点を軸に回転するようにして色が変化していくグラデーションとなります。

conic-gradient()の使い方

扇形グラデーションを指定したい場合は、「conic-gradient」 関数を使用しましょう。
基本的な構文は、以下のように記述します。

【基本構文】

conic-gradient(角度や中心の位置, 開始色, 終了色);

色のみ指定した場合は、画面の中央地点を軸に、12時の方向から開始するグラデーションが表示されます。

【サンプルコード（12時方向開始）】

.sample_background {
    background: conic-gradient(red, blue);
}

【表示結果】

sample

開始位置を変更したい場合は、「from」 に続けて角度を表す数値を指定します。
中心地点の変更は、radial-gradient の時と同様に 「at」 に続けて位置を指定します。

【サンプルコード（位置変更）】

.sample_background {
    background: conic-gradient(from 40deg at 20% 30%, red, blue);
}

【表示結果】

sample

画像にグラデーションをかける

CSSでは、背景画像の上にグラデーションをかけることもできます。
画像と合わせて表示したい場合は、以下のように 「,(カンマ)」 で区切って記述しましょう。

【基本構文】

background: グラデーションの記述, 背景画像の記述;

先に記述したものから順に前面に表示されるため、コードを書く際には注意が必要です。
また、画像の上からグラデーションをかける場合は、下の背景画像が見えるように色の不透明度を下げる必要があります。

【サンプルコード】

.background_test {
    background: linear-gradient(20deg, rgb(33 48 255 /.85) 10%, rgb(36 214 116 /.8), rgba(182 6 161 /.85)), url(sample_img.jpg);
}

【表示結果】

sample

反復グラデーションでグラデーションを繰り返す

ここまでに紹介した各関数には、グラデーションを反復させる機能は備わっていません。
同じグラデーションを複数回繰り返したい場合には、それぞれ以下の関数を使用しましょう。

  • 線形グラデーションの場合 ・・・ repeating-linear-gradient()
  • 円形グラデーションの場合 ・・・ repeating-radial-gradient()
  • 扇形グラデーションの場合 ・・・ repeating-conic-gradient()

どのパターンのグラデーションでも、基本は先ほど紹介した関数の名前の先に”repeating-“を付けるだけです。

今回は、repeating-linear-gradient 関数の一例を紹介します。
この関数では、linear-gradient と同様にグラデーションの方向と色を指定した後に、反復するグラデーションごとの幅を指定します。

以下のコードは、斜め方向の線形グラデーションを反復する例です。

【サンプルコード】

.background_test {
    background: repeating-linear-gradient(40deg, red, blue 33.3%);
}

【表示結果】

sample

まとめ

今回は、CSSの機能を使用してグラデーションを表示する方法について解説しました。

各種グラデーションを使いこなすことができれば、グラデーションのある背景のためだけに画像を用意する必要がなくなり、ページの軽量化や高速化を実現しつつ、柔軟なページレイアウトができるようになります！

デザインの幅を広げる手段の1つとして有用ですので、ぜひこの記事を参考に活用してみてくださいね！

HTML/CSSの学習方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

HTML/CSSの関連記事

     

Otherカテゴリの最新記事