【2026年8月最新】CSSでグラデーション背景を作る方法まとめ｜linear-gradientとradial-gradientの使い方

「CSSで背景にグラデーションをかけたいけど、linear-gradientの角度指定がいつも直感と違う…」——検索でこの記事にたどり着いた方は、そんな経験があるはずです。

CSSのグラデーションは、画像を1枚も用意せずにコードだけで美しい背景・ボタン・見出しの装飾を作れる便利な機能です。しかし、角度の基準や色の指定方法、画像との重ね方など、覚えておかないと「思った方向と逆になる」「色が急に変わって滑らかにならない」といったハマりどころがいくつもあります。

この記事では、linear-gradientとradial-gradientの基本から、角度指定、複数色・透明度の扱い、画像との組み合わせ、conic-gradientなどの応用、そしてClaude CodeのようなAIコーディングツールを使ったLP・Webサイト制作の活用方法まで整理します。

この記事を最後まで読むと、次の6つが明確になります。

01 OVERVIEW linear-gradientの基本構文と動作 コードだけで背景に色のグラデーションを作る

linear-gradient()は、CSSのbackground（またはbackground-image）プロパティに指定する直線的な色のグラデーションを作る関数です。基本構文は以下の通りです。

.box {
  background: linear-gradient(方向, 色1, 色2);
}

/* 例：上から下へ、赤からオレンジへのグラデーション */
.box {
  background: linear-gradient(to bottom, #dc2626, #f97316);
}

見ての通り、「方向」「色1」「色2」（必要に応じて色3、色4…）をカンマ区切りで並べるだけで、複雑な画像編集ソフトを使わずにグラデーション背景を作れます。

1-1. gradientは「画像」として扱われる

意外と見落とされがちですが、linear-gradient()の値はCSS上では「画像」の一種として扱われます。そのため、background-colorではなくbackground（またはbackground-image）プロパティに指定する必要があります。

02 ANGLE 角度・方向の指定方法 「0degが上」という直感に反するルールを正しく覚える

linear-gradientの方向指定でつまずく人が最も多いのが角度（deg）の基準です。

角度・キーワード	方向
0deg	下から上へ（真上方向）
90deg	左から右へ
180deg（角度省略時のデフォルト）	上から下へ
270deg	右から左へ
to right	左から右へ（90degと同じ）
to bottom	上から下へ（180degと同じ、省略時のデフォルト）
to top right	左下から右上へ（斜め）

/* 角度で指定 */
background: linear-gradient(90deg, #dc2626, #f97316); /* 左から右 */

/* キーワードで指定（可読性が高くおすすめ） */
background: linear-gradient(to right, #dc2626, #f97316); /* 左から右 */
background: linear-gradient(to bottom right, #dc2626, #f97316); /* 左上から右下の斜め */

/* 方向を省略すると「上から下」がデフォルトになる */
background: linear-gradient(#dc2626, #f97316);

2-1. 角度とtoキーワード、どちらを使うべきか

デザインカンプ（完成イメージ）で角度が正確に指定されている場合（例:「135度で」）は角度指定、大まかに「左上から右下へ」のような感覚で伝えられる場合はtoキーワードを使うと、意図が伝わりやすくなります。

03 COLOR STOPS 複数色・カラーストップ・透明度の指定 3色以上のグラデーションと、色の切り替え位置を制御する

linear-gradientは2色だけでなく、3色以上を並べることも可能です。

/* 3色のグラデーション */
background: linear-gradient(to right, #dc2626, #f97316, #facc15);

3-1. カラーストップで色の位置を制御する

各色の後ろにパーセンテージ（または長さの単位）を指定すると、その色がどの位置に来るかを細かくコントロールできます。これをカラーストップと呼びます。

/* カラーストップを指定：最初の40%は赤のまま、残りでオレンジへ変化 */
background: linear-gradient(to right, #dc2626 0%, #dc2626 40%, #f97316 100%);

この書き方を応用すると、「途中まで単色で、そこから急にグラデーションが始まる」ような表現も作れます。同じ色を2つの位置（0%と40%）に指定することで、その区間は色が変化せず単色のまま維持される、という仕組みです。

カラーストップの数値は、デザインカンプの指示通りに再現したいときに特に重要になります。デザイナーから「上40%は赤のまま、そこから下にかけてオレンジへ」といった指示を受けた場合、この書き方をそのままCSSに落とし込むことができます。

3-2. 透明度を使ったグラデーション

rgba()やhsla()を使えば、色から透明への滑らかなグラデーションも作れます。これは後述する「画像に色を重ねる」表現で頻繁に使われるテクニックです。

/* 上から下にかけて、黒の不透明から透明へ変化するグラデーション */
background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));

rgba()の代わりにhsla()（色相・彩度・明度・透明度）を使う書き方もあります。色の感覚的な調整（同じ色味のまま明るさだけ変える等）をしたい場合は、hsla()の方が直感的に扱える場面があります。近年はrgb()やhsl()の中に直接透明度を含めるモダンな構文（例: rgb(220 38 38 / 70%)）も使えるようになっていますが、記法自体は今回紹介したrgba()・hsla()と同じ考え方で理解できます。

04 RADIAL GRADIENT radial-gradientの使い方 中心から外側へ広がる円形・楕円形のグラデーション

radial-gradient()は、中心点から外側へ向かって放射状に広がるグラデーションを作る関数です。

.box {
  background: radial-gradient(色1, 色2);
}

/* 例：中心が明るく、外側が暗い円形グラデーション */
.box {
  background: radial-gradient(#facc15, #dc2626);
}

何も指定しない場合、radial-gradientは要素の中央を中心点、楕円形（ellipse）として描画されます。これはlinear-gradientの「方向省略時は上から下」と同様に、覚えておくと便利なデフォルト値です。

指定項目	省略時のデフォルト	指定例
形状（shape）	楕円形（ellipse）	circle（正円にしたい場合）
サイズ（size）	farthest-corner（最も遠い角まで）	closest-side（最も近い辺まで）
中心位置（position）	中央（center）	at top left（左上を中心に）

/* 正円で、左上を中心にしたグラデーション */
background: radial-gradient(circle at top left, #facc15, #dc2626);

/* サイズを指定：最も近い辺までで円を完結させる */
background: radial-gradient(circle closest-side at center, #facc15, #dc2626);

4-1. 複数のradial-gradientを重ねて質感を出す

radial-gradientは、複数個をカンマ区切りで重ねることで、単色の背景に奥行きのある質感を出すテクニックとしても使われます。

.textured-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08), transparent 50%),
    #1a1a1a;
}

このように、暗い背景色の上にごく薄い透明のradial-gradientを複数重ねると、単調になりがちな単色背景に柔らかい光の演出を加えることができます。画像を1枚も使わずにこうした質感を表現できるのが、CSSグラデーションの強みです。

05 ADVANCED 画像との重ね方・conic-gradient等の応用テクニック グラデーションをさらに実務的に使いこなす

5-1. 画像の上にグラデーションを重ねる

backgroundプロパティは、グラデーションと画像をカンマ区切りで重ねて指定できます。先に書いたものほど手前（上のレイヤー）に表示されるルールを覚えておいてください。

.hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2)), url('hero.jpg');
  background-size: cover;
}

この書き方は、写真の上に暗めのグラデーションを重ねて、その上に配置する見出しの文字を読みやすくするという、Webデザインで非常によく使われる定番パターンです。写真そのものを加工しなくても、CSSだけで実現できる点が大きなメリットです。

5-2. repeating-gradientで縞模様を作る

linear-gradientやradial-gradientの先頭に「repeating-」を付けると、同じパターンを繰り返すグラデーションになります。

/* 10pxごとに赤と白を繰り返す縞模様 */
background: repeating-linear-gradient(45deg, #dc2626 0px, #dc2626 10px, #fff 10px, #fff 20px);

5-3. conic-gradientで色相環のような表現を作る

比較的新しい機能としてconic-gradient()があります。これは中心点を軸に、時計回りに色が変化していく「円錐状」のグラデーションです。

/* 中心を軸に色が一周するグラデーション（色相環のような表現） */
background: conic-gradient(red, yellow, green, blue, red);

conic-gradientは主要なモダンブラウザで広くサポートされていますが、比較的新しい機能のため、古いバージョンのブラウザを考慮する必要があるプロジェクトでは事前に対応状況を確認しておくと安心です。

5-4. 文字自体にグラデーションをかける（グラデーションテキスト）

見出しの文字そのものにグラデーションをかける「グラデーションテキスト」は、LPのキャッチコピーなどで人気の高い表現です。これはbackground-clip: textというテクニックを使って実現します。

.gradient-text {
  background: linear-gradient(to right, #dc2626, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

グラデーションテキストは印象的な表現である一方、多用しすぎるとページ全体が騒がしい印象になりやすい表現でもあります。メインのキャッチコピーなど、本当に強調したい1〜2箇所に絞って使うのが実務上のバランスの取り方です。

06 VENDOR PREFIX ベンダープレフィックスの現在の必要性 「-webkit-」は本当にまだ必要なのか

かつてグラデーションが新しい機能だった時代（2010年代前半）は、-webkit-linear-gradient()のようにベンダープレフィックスを付けて書く必要がありました。しかし2026年現在、主要なモダンブラウザ（Chrome・Firefox・Safari・Edge）はすべて、プレフィックスなしの標準構文（linear-gradient()）に対応しています。

時期・状況	プレフィックスの必要性
2010年代前半（登場初期）	各ブラウザ向けに-webkit-, -moz-, -o-を併記する必要があった
2026年現在の主要ブラウザ	不要。標準構文（linear-gradient等）だけで問題なく動作する
IE9以下（すでにサポート終了）	そもそもCSSグラデーション自体に対応していない

07 COMMON MISTAKES 実務でよくある間違いパターン ここまでの内容を「事故のパターン集」として総整理

間違いパターン	症状	対策
background-colorにグラデーションを指定	スタイルが反映されない	backgroundまたはbackground-imageに指定する
角度を「0deg=右」と勘違いする	意図と逆方向のグラデーションになる	0degは真上、90degが右であることを覚える
画像とグラデーションの重ね順を逆に覚える	画像がグラデーションの下に隠れて見えない	先に書いたものが手前（上）に表示されると覚える
透明度に0〜255の数値を指定してしまう	色が正しく表示されない	rgba()のalpha値は0〜1の範囲で指定する
不要な古いベンダープレフィックスを大量に書く	コードが冗長になる	2026年現在は標準構文のみで基本的に十分

7-1. レビューで確認すべきチェックポイント

社内でCSSのコードレビュールールを作る場合、グラデーションに関しては以下の観点を確認項目に加えておくと、実装ミスの再発防止に役立ちます。

特にスマートフォンとPCで見た目が変わるケースには注意が必要です。同じグラデーションでも、画面幅が変わることで角度や色の見え方の印象が変わることがあるため、レスポンシブデザインの確認と合わせてグラデーションの見た目もチェックすることをお勧めします。

08 AI CODING 【独自】LP制作でのAIコーディング活用 「狙った通りの見た目」を素早く実現する新しい選択肢

ここまで紹介してきたグラデーションの角度・色・重ね順などの調整は、実務では「見た目を確認しながら数値を微調整する」試行錯誤が発生しやすい作業です。この試行錯誤の工程は、実はClaude CodeのようなAIコーディングエージェントが力を発揮しやすい領域でもあります。

弊社（株式会社GENAI）では、自社LP・資料のデザイン調整にもClaude Codeを活用しています。「もう少し赤みを強くして」「グラデーションの角度を斜めにして」といった感覚的な指示でも、意図を汲んでCSSコードを修正してくれるため、デザイナーでなくても細かい調整を素早く試せます。

8-1. 非エンジニア・非デザイナーがLP調整に関わる意味

「CSSは書かないから関係ない」という経営者・マーケティング担当の方も多いはずです。しかし、LPや資料の見た目の印象は、コンバージョン率や商談の成約率に直結する経営課題でもあります。「この背景をもう少し明るく」「このボタンをもっと目立たせたい」といった感覚的な要望を、Claude Codeに直接伝えて試してみることができるのは、非エンジニアにとって大きな価値です。

もちろん、ブランドイメージに関わる最終的なデザイン判断は人間が行うべき領域です。Claude Codeはあくまで「試行錯誤のスピードを上げる」アシスタントという位置づけであり、最終的な意思決定を代替するものではありません。弊社ではLP制作以外にも営業・広告・経理・秘書業務までClaude Codeを組み込んでおり、月額約30,000円（Max 20xプラン）の投資で、こうした細かいデザイン調整まで含めて業務を分担できている実感があります。

LPのデザイン調整も、Claude Codeの業務活用も、AI鬼管理が伴走します

「LPの見た目を素早く改善したい」「開発・デザイン以外の業務にもAIを活かしたい」という経営者・マーケティング担当の方に向けて、Claude Codeの導入設計をサポートしています。

よくある質問

Q. linear-gradientの角度で0degはどの方向ですか？

A. 0degは「真上」を意味します。時計の12時の方向を基準に、時計回りに角度が増えていくため、90degは右、180degは下、270degは左になります。「0deg=右」という誤解が非常に多いので注意してください。

Q. グラデーションをbackground-colorに指定してもいいですか？

A. できません。グラデーションはCSS上で「画像」として扱われるため、backgroundまたはbackground-imageプロパティに指定する必要があります。background-colorに書くとスタイルが反映されません。

Q. linear-gradientとradial-gradient、どちらを使えばいいですか？

A. 直線的な色の変化（上から下、斜め等）にはlinear-gradient、中心から放射状に広がる表現（ボタンのハイライト等）にはradial-gradientを使います。デザインの意図に応じて選んでください。

Q. 画像とグラデーションを重ねる場合、どちらが上に表示されますか？

A. backgroundプロパティにカンマ区切りで複数指定した場合、先に書いた方が手前（上のレイヤー）に表示されます。写真に暗いグラデーションを重ねたい場合は、グラデーションを先に、画像を後に書きます。

Q. ベンダープレフィックス（-webkit-等）は今でも書くべきですか？

A. 2026年現在、主要なモダンブラウザはプレフィックスなしの標準構文に対応しているため、基本的には不要です。対象ブラウザの範囲が特殊な場合のみ、事前に対応状況を確認してください。

Q. conic-gradientとradial-gradientの違いは何ですか？

A. radial-gradientは中心からの「距離」に応じて色が変化するのに対し、conic-gradientは中心を軸にした「角度」に応じて色が変化します。色相環のような表現やカラーピッカーのUIなどでconic-gradientが使われます。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。