グラデーションを使いすぎると安っぽく見えるって本当ですか？

本当です。サイト全体に多色派手なグラデーションを乱用すると、2010年代初頭の安っぽいデザインに見えます。現代のモダンデザインでは、(1) 同系色の2色で穏やかに、(2) ヒーローエリアなど1〜2箇所だけ、(3) コントラスト比は控えめに、というルールが基本です。「グラデーションを入れた方が良いか」は迷ったら入れない方が無難です。

グラデーションの背景に文字を載せると読みにくくなります

グラデーション背景の上に文字を載せる時は、必ず「文字色のコントラスト比」をWCAG基準（4.5:1以上）で確認してください。読みにくい場合は、(1) 文字に半透明の背景ボックスを敷く、(2) グラデーション全体に黒の半透明オーバーレイをかける、(3) 文字を画像の上に置かない領域を作る、のいずれかで対応します。

IEや古いブラウザでも表示されますか？

linear-gradient と radial-gradient は IE10 以降で対応しています（IE9 以前は要ベンダープレフィックス、または背景色フォールバック）。conic-gradient は IE 全バージョン非対応・Safari 13 以前も非対応です。フォールバックとして `background: #667eea; background: linear-gradient(...);` のように単色背景を先に書いておくと安全です。今や IE 対応はほぼ不要なので、Safari と古い Android Chrome の対応だけ気にすれば十分です。

CSSグラデーションを無料で生成｜linear/radial/conic-gradientのコード自動出力

公開日: 2026-05-04

「LPのヒーロー背景にグラデーションを使いたいけど、CSSのコードが思い出せない」「角度・色の止め位置・透明度をいじりたいけど、コードを毎回書き直すのが面倒」——こんな時に役立つのがCSSグラデーションジェネレーターです。本記事では、線形・放射状・円錐の3種類のグラデーションの使い分け、カラーストップの仕組み、コピペで使えるパターン集、Tailwind CSS への落とし込みまでを解説します。

この記事で紹介するツール

CSSグラデーション生成【無料・登録不要】

マウス操作で美しいCSSグラデーションを作成。方向や色の組み合わせを視覚的に調整してコードをコピーできます。

グラデーションの3タイプを使い分ける

linear-gradient（線形）

指定した角度に沿って色が変化する最も基本的なグラデーション。LPのヒーロー背景、ボタンの陰影、カードのオーバーレイなど、9割の用途はこれで足ります。角度は 0deg（下→上）から 360deg まで指定可能で、`to right`（90deg）`to bottom`（180deg）のキーワードでも書けます。

radial-gradient（放射状）

中心点から外側に向かって色が広がるグラデーション。スポットライト効果、円形バッジの立体感、ヒーロー背景の中央に光源を置く演出に使います。`circle at center` `ellipse at top left` のように形状と中心位置を指定します。

conic-gradient（円錐）

中心点を回転軸にした円錐状のグラデーション。円グラフ、虹色のカラーホイール、回転する装飾要素に使います。比較的新しいCSS仕様で、IE未対応ですが、モダンブラウザは全て対応済みです。

カラーストップの基本

グラデーションの「色の止まり位置」を %（または px / em）で細かく制御できます。これを使うと、ベタ塗りに近い見た目から、滑らかな変化まで自在に作れます。

`linear-gradient(to right, red, blue)` → 0%-100%で滑らかに変化
`linear-gradient(to right, red 50%, blue 50%)` → 50%でくっきり分割（ベタ塗り）
`linear-gradient(to right, red 0%, red 30%, blue 70%, blue 100%)` → 中央30%だけ滑らかに変化
3色以上：`linear-gradient(to right, red, yellow, green)` で多色グラデーション
透明度：`linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7))` でオーバーレイ

実用パターン集（コピペで使える）

ヒーロー背景（青系）：`linear-gradient(135deg, #667eea, #764ba2)` モダン定番
ヒーロー背景（暖色）：`linear-gradient(135deg, #ffafbd, #ffc3a0)` 女性向け・ライフスタイル
ボタンホバー：`linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)` クリック可能感
画像オーバーレイ：`linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))` 写真を暗くして文字を載せる
スポットライト：`radial-gradient(circle at 30% 30%, #fff, transparent 70%)` 中心に光
カラーホイール：`conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red)`

Tailwind CSS で使う

Tailwind v3 以降は from / via / to の3クラスでグラデーションを書けます。

`bg-gradient-to-r from-blue-500 to-purple-600` → 右方向グラデーション
`bg-gradient-to-br from-pink-400 via-red-500 to-yellow-500` → 右下方向・3色
`bg-gradient-to-t from-black via-transparent to-transparent` → 上向き暗色オーバーレイ
任意の色を使う：`from-[#667eea] to-[#764ba2]` （任意値構文）
角度の細かい指定はTailwindでは難しいため、CSSの `style={{background: ...}}` を併用

AIでグラデーションを作る手順

free-ai-tools.jpのCSSグラデーションツールに以下を入力すると、コードがコピペ可能な形式で生成されます。

1. グラデーションタイプ（linear / radial / conic）
2. 色を2〜5色指定（カラーピッカー or HEX値）
3. 角度（linear のみ）または中心位置（radial / conic）
4. カラーストップ位置（％指定）
5. プレビューを見ながら微調整
6. CSS / Tailwind 形式でコピー

よくある質問

Q. グラデーションを使いすぎると安っぽく見えるって本当ですか？: A. 本当です。サイト全体に多色派手なグラデーションを乱用すると、2010年代初頭の安っぽいデザインに見えます。現代のモダンデザインでは、(1) 同系色の2色で穏やかに、(2) ヒーローエリアなど1〜2箇所だけ、(3) コントラスト比は控えめに、というルールが基本です。「グラデーションを入れた方が良いか」は迷ったら入れない方が無難です。
Q. グラデーションの背景に文字を載せると読みにくくなります: A. グラデーション背景の上に文字を載せる時は、必ず「文字色のコントラスト比」をWCAG基準（4.5:1以上）で確認してください。読みにくい場合は、(1) 文字に半透明の背景ボックスを敷く、(2) グラデーション全体に黒の半透明オーバーレイをかける、(3) 文字を画像の上に置かない領域を作る、のいずれかで対応します。
Q. IEや古いブラウザでも表示されますか？: A. linear-gradient と radial-gradient は IE10 以降で対応しています（IE9 以前は要ベンダープレフィックス、または背景色フォールバック）。conic-gradient は IE 全バージョン非対応・Safari 13 以前も非対応です。フォールバックとして `background: #667eea; background: linear-gradient(...);` のように単色背景を先に書いておくと安全です。今や IE 対応はほぼ不要なので、Safari と古い Android Chrome の対応だけ気にすれば十分です。