linear-gradientとは？初心者でも分かるCSSの背景カラーの作り方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

linear-gradientとは？

このキーワードは、ウェブページの背景を美しく見せるための CSS の機能のひとつです。linear-gradient を使うと、1つの色だけでなく複数の色を滑らかに混ぜて背景を作ることができます。たとえば空の色が徐々に変わるようなグラデーションや、夕焼けのような暖かな色の組み合わせを1枚の背景で表現できます。

基本的な考え方は「色の変わり目を線の方向に沿って並べる」ことです。方向を決めると、グラデーションがどの方向に広がるかが決まり、カラーの順序を変えると全体の印象が大きく変わります。デザインの第一歩として覚えておくと、後々のウェブ制作が楽になります。

基本の使い方

書き方はとてもシンプルです。background: linear-gradient(direction, color-stop1, color-stop2, ...); ここで direction は角度（deg）やキーワード「to right」「to bottom」などを使います。color-stop は色の指定です。2色以上を並べるとグラデーションが作れます。

よく使う例をいくつか紹介します。

構文	説明	実例
linear-gradient(to right, red, blue)	左から右へ赤から青へのグラデーション	background: linear-gradient(to right, red, blue);
linear-gradient(45deg, yellow, green, blue)	右下へ向かう斜めのグラデーション	background: linear-gradient(45deg, yellow, green, blue);
linear-gradient(to bottom, #fff, #000)	上から下へ白から黒へ	background: linear-gradient(to bottom, #fff, #000);

ポイントは カラーの順序 と 方向の選択 です。色を増やすと美しいグラデーションになりますが、色が多いと見づらくなることもあるので注意してください。

実務で使うときのコツをいくつか挙げます。

・カラーは2色以上で考えると表現の幅が広がるが、3色以上だとまとまりを意識することが大切です。
・方向は試行錯誤して最適な見え方を探します。横長の背景には「to right」や「90deg」などが適しています。
・背景色のフォールバックを用意しておくと、グラデーションがうまく表示されないブラウザでも見た目を保てます。

次のポイントも覚えておくと便利です。
・複数の色止めを使うと滑らかな変化を作れます。
・同じデザインでも、色の組み合わせを変えるだけで雰囲気が大きく変わります。
・アクセシビリティの観点から、背景と文字のコントラストが低くならないよう注意しましょう。

実世界のデザインでの使い方としては、ボタンの背景、ヘッダーの背景、カードの枠周りなど、視覚的な階層を出すときに線形のグラデーションが役立ちます。背景のグラデーションを活用することで、平面的なデザインに立体感を加えたり、ブランドカラーを強調したりする効果が期待できます。

注意点とよくある質問

・旧式のブラウザではサポートが限定される場合があります。最新のブラウザでの互換性は高いですが、古い環境を対象とする場合はフォールバックを用意しましょう。

・グラデーションは背景要素だけでなく背景画像と組み合わせることもできます。複数のレイヤーを作ることで、より複雑なデザイン表現が可能です。

要点をまとめると、linear-gradient は方向と色の組み合わせを変えるだけで背景の印象を大きく変えられる強力なツールです。練習を重ねれば、2色だけでも見違える美しい背景を作れるようになります。

linear-gradientの同意語

線形グラデーション: CSS の linear-gradient(...) によって作られる、色が一定の直線方向に滑らかに変化するグラデーションの総称。
直線グラデーション: 色が直線方向に変化するグラデーションの別称。線形グラデーションと同義で使われることが多い。
リニアグラデーション: linear-gradient の日本語風の表現。ほぼ同義として扱われる表現。
linear-gradient関数: 英語表記の関数名そのまま。コード解説や仕様説明で使われる名称。
線形グラデーション関数: linear-gradient(...) を指す日本語の呼称。関数として言及する際に使われる。
線形カラーグラデーション: 色が線形に変化するグラデーションを指す表現の一つ。カラーの変化を強調する際に用いられることがある。
線形グラデーション表現: 線形グラデーションの表現方法を指す語。用途や描画の説明で使われることがある。

linear-gradientの対義語・反対語

単色: 背景が1色だけで塗られ、色の変化が全くない状態。linear-gradient の対義語として、色が滑らかに変化するグラデーションがない状態を指します。
グラデーションなし: グラデーションを使わず、1色で塗り分ける状態。linear-gradient を使わない表現の典型例です。
radial-gradient: 放射状に色が広がるグラデーション。中心から外へ向かって色が変化するため、直線的な線形グラデーション(linear-gradient)とは形が異なります。
conic-gradient: 円錐状・中心を軸にした角度方向で色が変化するグラデーション。線形の配色パターンとは別の、円周的な広がり方をします。
非線形グラデーション: linear-gradient 以外のグラデーション全般。代表的には radial-gradient や conic-gradient などが含まれ、線形グラデーションとは異なる方向性の色の変化を作ります。

linear-gradientの共起語

グラデーション: 色が滑らかに変化するデザインの総称。linear-gradientはこのグラデーションの一種です。
背景: 背景として要素の背面に色や画像を設定する領域。linear-gradientは背景画像として使われます。
背景画像: 背景に適用する画像やグラデーションのこと。linear-gradientは背景画像の一種として扱われます。
カラーコード: 色を表す文字列。#RRGGBB や rgb(...)、rgba(...)、hsl(...) などの表記を使います。
rgb: Red・Green・Blueの値で色を表す表現。数値は0から255の範囲で指定します。
rgba: rgbにアルファ値(透明度)を追加した表現。透明度は0から1の範囲で指定します。
hsl: 色相・彩度・明度で色を表す表現。
hsla: hslにアルファ値を追加した表現。透明度を指定できます。
hex: 16進数カラーコード。#RRGGBB形式で色を表します。
color-stop: グラデーションの色の区切り点。色とその位置を指定します。
色停止: color-stopの日本語表現。グラデーションの色が変わる点。
色停止位置: 色停止の位置を示す。%やpx、calc()などで指定します。
deg: 方向を角度で指定する際の単位。例: 45deg。
角度: グラデーションの向きを角度で指定する方法。
to bottom: 下方向へ変化するグラデーションの指定キーワード。
to top: 上方向へ変化するグラデーションの指定キーワード。
to left: 左方向へ変化するグラデーションの指定キーワード。
to right: 右方向へ変化するグラデーションの指定キーワード。
angle: 方向を角度で指定する別の書き方。degと併用します。
45deg: 具体的な方向の例。45度の斜め方向に変化します。
-webkit-linear-gradient: 古いWebKit系ブラウザで使われていたベンダープリフィックス付き書き方。
radial-gradient: 円形のグラデーションを作る関数。中心から外側へ色が広がります。
conic-gradient: 円錐状のグラデーションを作る関数。中心を基点に色が放射状に変化します。
repeating-linear-gradient: 同じグラデーションを一定間隔で繰り返す関数。
gradient: グラデーション全般を指す総称。linear-gradientはこのカテゴリの一例。
CSS: スタイルシート言語。HTMLの見た目を定義します。
CSS3: CSSの第三世代で、線形グラデーションのような新機能が導入されました。
ブラウザ互換性: 異なるブラウザで表示が異なる場合があるため、対応状況を確認します。
グラデーションジェネレーター: デザインを視覚的に作成するツール・サイト。
色の透明度: 色の不透明度を調整します。rgba/hslaで指定可能。
transparent: 完全に透明な色の値。グラデーションで透明度を設定します。
currentColor: 現在の要素の文字色を参照する特別な色値。
ブレンドモード: 背景色の重なり方を制御する機能。

linear-gradientの関連用語

linear-gradient: 線形グラデーション。開始色から終了色へ直線的に色が変化します。色停止点を複数指定でき、方向は角度（deg/turn）または方向キーワードで決めます。
radial-gradient: 放射状グラデーション。中心から外側へ色が変化します。円形または楕円形の形状を指定できます。
conic-gradient: 円錐状のグラデーション。中心を起点に角度方向へ色が回転しながら変化します。
repeating-linear-gradient: 線形グラデーションを一定の間隔で繰り返すパターン。ストライプ風のデザインに向いています。
repeating-radial-gradient: 放射状グラデーションを一定間隔で繰り返すパターン。円形・楕円形の模様を作れます。
color-stop: グラデーションの各停止色。色と停止位置をセットで指定します。
color-stop-position: 色停止の位置。0%〜100%の割合や長さ（px等）で指定することが多いです。
angle: 線形グラデーションの方向を角度で指定します。0degは右、90degは下を向きます。
turn: 角度の別表現。1turnは360degに相当します。turn単位でも方向を示せます。
direction-keywords: to bottom / to top / to left / to right などの方向キーワード。角度指定の代わりに使えます。
background-image-property: グラデーションは通常 background-image または background プロパティの値として設定します。
color-syntax: カラー指定には hex(#RRGGBB)、rgb(a)、hsl(a) などが使えます。グラデーションの色停止でこれらを組み合わせます。
transparent: 透明色を表すキーワード。グラデーションの終端を透明にしてフェードアウト効果を作れます。
rgba_hsla_colors: rgba() / hsla() のようにアルファ（不透明度）を含むカラー表現。透明度を変えたグラデーションが作れます。
hex_color: 16進カラーコード（#RRGGBB や #RGB）で色を指定します。多くの色を正確に表現できます。
vendor-prefixes: 古いブラウザサポートのための前置き記法。昔は -webkit-gradient や -webkit-linear-gradient が使われていました。