CSSで背景をなめらかに色変化させたいときは、linear-gradient()を使います。
画像編集ソフトを使わなくても、2色以上の色、向き、色が切り替わる位置をCSSだけで指定できます。この記事では、初めて使う方がそのまま試せるコードから、背景画像への重ね方や文字のグラデーションまで順番に解説します。
linear-gradientとは直線状のグラデーションを作るCSS関数
linear-gradient()は、2色以上の色を直線に沿って変化させ、グラデーション画像を作るCSS関数です。「linear」は直線、「gradient」は色の連続的な変化を意味します。
生成結果は単なる色ではなくCSSの画像として扱われるため、通常はbackgroundまたはbackground-imageプロパティに指定します。拡大しても荒れにくく、要素のサイズに合わせて自動で描画される点が特徴です。
.gradient-box {
background: linear-gradient(#38bdf8, #a855f7);
}この例では、上の水色から下の紫色へなめらかに変化します。方向を省略した場合は、上から下が初期値です。
linear-gradientの基本を実際に試す
ここでは、HTMLで箱を1つ用意し、その背景をCSSでグラデーションにします。「変更前の状態→追加するCSS→変更後の状態」の順で見ていきましょう。
HTMLで表示する箱を作る
まず、gradient-boxというクラス名を付けたdiv要素を作ります。中の文章は、グラデーションの上に文字が表示されることを確認するためのものです。
<div class="gradient-box">
linear-gradientの練習
</div>変更前は単色の背景にする
最初はbackground-colorで水色だけを指定します。幅や余白も加えて、変化を確認しやすくしておきます。
.gradient-box {
max-width: 640px;
padding: 80px 24px;
border-radius: 16px;
background-color: #38bdf8;
color: #ffffff;
font-size: 24px;
font-weight: 700;
text-align: center;
}背景を2色のグラデーションに変更する
background-colorを削除し、代わりにbackground: linear-gradient()を追加します。丸括弧の中へ、開始色と終了色を半角カンマで区切って書いてください。
.gradient-box {
max-width: 640px;
padding: 80px 24px;
border-radius: 16px;
background: linear-gradient(#38bdf8, #a855f7);
color: #ffffff;
font-size: 24px;
font-weight: 700;
text-align: center;
}ブラウザを更新すると、水色から紫色へ変化する背景になります。基本形はlinear-gradient(開始色, 終了色)と覚えると分かりやすいです。
グラデーションの方向を指定する
方向は、to rightのようなキーワード、または45degのような角度で指定できます。方向は色より前に書き、半角カンマで区切ります。
左右や斜めの方向をキーワードで指定する
左から右へ変化させる場合はto rightを使います。toの後ろは「グラデーションが進む方向」です。
.gradient-box {
background: linear-gradient(to right, #38bdf8, #a855f7);
}右下へ進めたい場合は、横と縦の方向を組み合わせてto right bottomと書きます。
.gradient-box {
background: linear-gradient(to right bottom, #38bdf8, #a855f7);
}細かな向きはdegで指定する
degはdegree（度）の略です。0degは下から上、90degは左から右、180degは上から下へ変化します。
.gradient-box {
background: linear-gradient(135deg, #38bdf8, #a855f7);
}角度は時計回りに増えます。デザインを見ながら少しずつ数値を変えると、目的の向きを見つけやすいでしょう。
色の数と変化する位置を指定する
linear-gradient()には3色以上も指定できます。それぞれの色は「カラーストップ（色経由点）」と呼ばれ、何％の位置でその色になるかも決められます。
3色以上を使う
色を3つ指定すると、指定した順番で均等に配置されます。次の例は、水色、紫色、ピンクの順に変化します。
.gradient-box {
background: linear-gradient(
to right,
#38bdf8,
#a855f7,
#ec4899
);
}パーセントで色の位置を決める
色の直後に30%のような位置を書くと、その場所で指定色になるように変化します。パーセントは色の量そのものではなく、要素内の位置を示す値です。
.gradient-box {
background: linear-gradient(
to right,
#38bdf8 0%,
#a855f7 35%,
#ec4899 100%
);
}この指定では、紫色が中央の50％ではなく35％の位置に来ます。そのため、紫からピンクへ変わる範囲が広くなります。
同じ位置を指定して境界をはっきりさせる
2つの色へ同じ位置を指定すると、なめらかに混ざらず、色がその位置で切り替わります。ストライプや背景の塗り分けに使える方法です。
.gradient-box {
background: linear-gradient(
to right,
#38bdf8 0% 50%,
#ec4899 50% 100%
);
}linear-gradientの実用的な使い方
基本構文を理解したら、Webサイトでよく使う背景、ボタン、画像への重ね合わせ、文字のグラデーションを試してみましょう。
ボタンの背景に使う
ボタンに使う場合は、文字とのコントラストを確保することが大切です。背景が明るいなら暗い文字、濃い背景なら白い文字を選びます。
<a class="gradient-button" href="#">詳しく見る</a>.gradient-button {
display: inline-block;
padding: 14px 28px;
border-radius: 9999px;
background: linear-gradient(90deg, #2563eb, #9333ea);
color: #ffffff;
font-weight: 700;
text-decoration: none;
}背景画像に半透明のグラデーションを重ねる
背景はカンマ区切りで複数重ねられます。先に書いた画像が手前になるため、半透明のグラデーションを先、写真を後に指定します。
.hero {
min-height: 420px;
background:
linear-gradient(
90deg,
rgb(15 23 42 / 0.9),
rgb(15 23 42 / 0.2)
),
url("hero.jpg") center / cover;
}rgb(15 23 42 / 0.9)の最後の値は不透明度です。0に近いほど透明になり、1に近いほど色が濃くなります。写真の上に白い文字を置くときも、背景との境界を作りやすくなります。
文字をグラデーションにする
文字の形に背景を切り抜くと、文字自体がグラデーションしているように見せられます。読みやすさを保つため、見出しなど短い文字へ使うのがおすすめです。
.gradient-text {
background: linear-gradient(90deg, #0284c7, #9333ea, #db2777);
background-clip: text;
color: transparent;
}background-clip: textは、背景を文字の形に合わせて切り抜く指定です。color: transparentで通常の文字色を透明にすると、切り抜いた背景が見えるようになります。
linear-gradientが表示されないときの確認ポイント
色を2つ以上指定しているか確認する
グラデーションには少なくとも2つのカラーストップが必要です。色は半角カンマで区切り、丸括弧を閉じているかも確認してください。
background-colorではなくbackgroundに指定する
linear-gradient()の結果は画像なので、background-colorには指定できません。backgroundまたはbackground-imageを使います。
/* 表示されない書き方 */
.box {
background-color: linear-gradient(#38bdf8, #a855f7);
}
/* 表示される書き方 */
.box {
background-image: linear-gradient(#38bdf8, #a855f7);
}要素に幅や高さがあるか確認する
中身が空で、幅や高さもない要素は画面上に表示されません。テスト時はmin-heightやpaddingを指定し、背景を描画する範囲を作りましょう。
後から書いたbackgroundで上書きしていないか確認する
backgroundは背景画像や背景色などをまとめて指定するショートハンドプロパティです。後の行で別のbackgroundを書くと、先に指定したグラデーションが上書きされることがあります。
linear-gradientでよくある疑問
linear gradientとlinear-gradientは違いますか？
検索キーワードでは「linear gradient」と空白を入れて書くことがありますが、CSSの関数名はハイフンを入れたlinear-gradient()です。コードでは空白に置き換えないでください。
backgroundとbackground-imageのどちらを使いますか？
グラデーションだけを指定するなら、どちらでも表示できます。背景のほかの設定を残したい場合はbackground-image、位置やサイズなどもまとめて指定する場合はbackgroundが分かりやすいです。
円形や扇形のグラデーションも作れますか？
円の中心から広がる形はradial-gradient()、円周に沿って回転する形はconic-gradient()で作れます。直線状に色を変える場合はlinear-gradient()を選びます。
まとめ
linear-gradient()を使うと、画像を用意せずに直線状のグラデーションを作れます。まずはlinear-gradient(開始色, 終了色)の基本形を試してください。
慣れてきたら、to rightやdegで方向を変え、パーセントでカラーストップの位置を調整します。背景画像への重ね合わせでは、文字が読みやすいかも一緒に確認しましょう。