CSSを使えば、画像を使わずに滑らかなグラデーション背景を作成できます。
この記事では、linear-gradient の基本から応用、実用例までを初心者向けに丁寧に解説します。
目次
linear-gradientとは？
linear-gradient は、CSSで線形グラデーションを描くための関数です。画像ではなく「塗り」であるため、軽量かつ柔軟に背景デザインが可能です。
基本構文
background: linear-gradient(方向, 色1, 色2, ...);
例：
background: linear-gradient(to right, #ff7e5f, #feb47b);
この例では、左から右へピンクからオレンジへグラデーションします。
ちなみに、backgroundプロパティは複数のbackground系プロパティの一括指定プロパティで、上記は以下と同義です。
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
方向を指定する
キーワードで指定
to right：左 → 右to bottom：上 → 下to left top：右下 → 左上
background: linear-gradient(to bottom right, #6a11cb, #2575fc);
角度で指定
background: linear-gradient(45deg, #00c9ff, #92fe9d);
角度は時計回りで指定され、0deg は上から下へのグラデーションです。
複数色のグラデーション
複数色を滑らかにつなげることも可能です。
background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);
位置（パーセンテージ）を指定すると、色の切り替え位置を制御できます。
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
不透明度を変える
rgba() や hsla() を使うと、透明なグラデーションが作れます。
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.5));
背景画像の上に重ねて使用する際にも便利です。
グラデーションを繰り返す
repeating-linear-gradient を使うと、ストライプのような背景が作れます。
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
実用例：ボタンやヘッダーに
button {
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: white;
padding: 1em 2em;
border: none;
border-radius: 4px;
}
ボタンやセクションの背景に使えば、視覚的な印象を強めることができます。
背景画像とグラデーションを重ねる
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg');
background-size: cover;
background-position: center;
背景画像の上に半透明のグラデーションを重ねることで、文字を読みやすくできます。
グラデーションの中央が濁ってしまう場合は？
CSSではRGBモードで色が混ざり合うため、混ざり合ったところがグレーや茶色っぽく濁ってしまうことがあります。
解決・調整する方法を解説します。
CSSで中間色を明示的に指定する
background: linear-gradient(to right, #000000, #555555, #ffffff);
中央部分が濁ってしまうのを防ぐために自分で中間色を入れると、意図したグラデーションに近づきます。
複数のカラー停止点を使う
background: linear-gradient(to right, #000 0%, #333 25%, #666 50%, #999 75%, #fff 100%);
色の段階を細かく指定することで、グラデーションを手動で微調整できます。
画像化して使う（最終手段）
どうしてもデザインとCSSの差を埋められないときは、SVGやPNGで書き出したグラデーションを背景画像に使うのも手です。
まとめ
linear-gradient は、CSSだけで簡単にグラデーションが作れる便利な機能です。
また、repeating-linear-gradientはストライプのような簡単な模様をリピートさせて表示させたい時に便利です。
使い方はそこまで難しくないので、使えるようにしておきましょう。