CSSグラデーションはどのブラウザで使えますか？

linear-gradient と radial-gradient は Chrome・Firefox・Safari・Edge 等の全モダンブラウザで使えます（IE10+も対応）。conic-gradient は Chrome 69+・Firefox 83+・Safari 12.1+・Edge 79+ 以降で利用可能です。IE非対応ですが、2024年時点での IE のシェアは0.1%以下のため実用上問題ありません。

コピーしたCSSはどこに貼り付ければ良いですか？

CSSファイルやスタイルタグ内に background: linear-gradient(...); または background-image: linear-gradient(...); として貼り付けます。Tailwind出力を選んだ場合は、className に bg-gradient-to-r from-[#色1] to-[#色2] の形式で貼り付けてください。

background と background-image の違いは何ですか？

background はショートハンドプロパティで、background-color や background-image 等を一括指定できます。 background-image は画像（グラデーション含む）のみを指定するプロパティです。グラデーションのみ設定する場合はどちらでも動作しますが、background-color との併用が必要な場合は分けて書く方が確実です。

透明から色へのグラデーションを作るには？

transparent キーワードを使います。例: linear-gradient(transparent, #4f46e5) 。または RGBA形式で rgba(79, 70, 229, 0) から rgba(79, 70, 229, 1) と指定するとブラウザ間の色補間が安定します（Safari で透明グラデーションが黒っぽく見える問題を防ぎます）。

conic-gradient はどんな用途に向いていますか？

パイチャート・カラーホイール・角度ゲージ・ローダーアニメーションに最適です。また、チェック柄（market/checker pattern）などの幾何学模様も conic-gradient で作れます。

グラデーションをアニメーションさせることはできますか？

CSSの animation プロパティでは gradient の色を直接アニメーションできませんが、background-position を動かす（background-size を大きくして）疑似アニメーション、または CSS Houdini（@property）を使ったアニメーションが可能です。シンプルには filter: hue-rotate() のアニメーションも効果的です。

Tailwind CSS でグラデーションを使うには？

Tailwind では bg-gradient-to-r from-purple-500 to-pink-500 のように方向と from/to/via クラスで指定します。カスタムカラーの場合は from-[#667eea] to-[#764ba2] のように角括弧記法を使います。当ツールの「Tailwind出力」ボタンでそのまま使えるコードを生成できます。

グラデーションの色を何色でも使えますか？

CSSの仕様上、color stop の数に技術的な制限はありません。ただし、あまり多くの色を使うと視覚的に濁りやすいため、実用的には 2〜5 色がおすすめです。当ツールでは最大 8 色まで追加できます。

CSSグラデーションジェネレーター（無料・登録不要）

登録不要無料ブラウザ完結

linear・radial・conic の全グラデーションタイプに対応。最大8色のカラーストップ・20種プリセット・Tailwind出力を搭載。日本語完全対応で競合ツールを上回る機能を無料提供。

グラデーションタイプ

角度

カラーストップ

プリセット（20種）

使い方ガイド（5ステップ）

1
グラデーションタイプを選択
linear（直線方向）・radial（中心から放射）・conic（円錐状・時計回り）から選びます。ボタン背景には linear、ヒーロー背景には linear か radial、カラーホイール風デザインには conic が最適です。
2
カラーストップを設定
色見本をクリックすると色選択ポップアップが開きます。「＋追加」で最大8色まで追加でき、各ストップの位置は数値入力（0〜100%）で正確に指定できます。「✕」ボタンで削除（最低2色は維持）。
3
角度・形状を調整
linear/conic は角度スライダー（0〜360°）で方向を制御。radial は形状（circle/ellipse）と中心位置（center/top/bottom/left/right 等）を選択できます。
4
プリセットを活用
よく使われる20種のグラデーションをプリセットで即適用。SNS系・自然系・ブランド系・テック系にカテゴリ分類されています。プリセット適用後にカスタマイズも可能です。
5
CSSコードをコピーして使う
生成されたコードは CSS形式・background-image形式・Tailwind CSS形式の3種類。用途に合わせてコピーし、プロジェクトに貼り付けるだけで完成です。

他ツールとの比較：当サイトが選ばれる理由

機能	当サイト	cssgradient.io	colorzilla	mycolor.space
linear-gradient	✅	✅	✅	✅
radial-gradient	✅	✅	✅	❌
conic-gradient	✅ 対応	❌	❌	❌
最大色数	8色	4〜5色	多数	3色
Tailwind出力	✅	❌	❌	❌
日本語対応	✅ 完全	❌ 英語のみ	❌ 英語のみ	❌ 英語のみ
モバイル最適化	✅ ファースト	△	❌	△
プリセット	20種・分類	あり	135種	なし

※ 2026年5月時点の機能調査に基づく。

CSS gradient 構文・完全解説

linear-gradient()

直線方向に色が変化するグラデーション。Webで最もよく使われます。

/* 基本構文 */
background: linear-gradient(方向, 色1, 色2);

/* 角度指定（90deg = 左→右） */
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);

/* 複数ストップ + 位置指定 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f64f59 100%);

radial-gradient()

中心点から外側に向かって放射状に色が変化します。ボタンのシャイン効果やスポットライト表現に最適。

/* circle（正円） */
background: radial-gradient(circle, #ff6b6b, #4ecdc4);

/* ellipse（楕円）+ 位置指定 */
background: radial-gradient(ellipse at top left, #a18cd1, #fbc2eb);

/* サイズ指定 */
background: radial-gradient(circle closest-side, #ff6b6b 50%, #4ecdc4);

conic-gradient()

時計の針のように中心点を軸に色が回転します。パイチャートや角度メーターに使えます。CSS最新仕様（Chrome 69+・Firefox 83+・Safari 12.1+対応）。

/* 基本 */
background: conic-gradient(#ff6b6b, #ffd93d, #6bcb77, #4d96ff, #ff6b6b);

/* 開始角度指定 */
background: conic-gradient(from 90deg, #ff6b6b, #4ecdc4);

/* パイチャート風（位置指定） */
background: conic-gradient(
  #e63946 0% 25%,
  #457b9d 25% 60%,
  #a8dadc 60% 100%
);

ブラウザ対応状況（2026年現在）

linear / radial: 全モダンブラウザ対応（IE10+）
conic: Chrome 69+ / Firefox 83+ / Safari 12.1+ / Edge 79+（IE未対応）
プレフィックス（-webkit-）は現在ほぼ不要

シーン別：グラデーション活用ガイド

ボタン背景

linear 135deg・2色。ホバーで明るくして立体感を演出。

background: linear-gradient(135deg, #667eea, #764ba2);

ヒーロー背景

3色以上の暗めトーン。テキストのコントラスト確保に注意。

background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);

プログレスバー

linear 90deg・細めの height。border-radius で丸みを付ける。

background: linear-gradient(90deg, #4776e6, #8e54e9);

カードホバー効果

radial で擬似スポットライト。:hover で opacity を変える。

background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent);

パイチャート

conic で境界線ゼロのシンプルなグラフ。各色に%指定。

background: conic-gradient(#e63946 33%, #457b9d 66%, #a8dadc);

画像オーバーレイ

透明→黒の linear でテキストを読みやすく。

background: linear-gradient(transparent, rgba(0,0,0,.7));

よくある質問（FAQ）

CSSグラデーションはどのブラウザで使えますか？: linear-gradient と radial-gradient は Chrome・Firefox・Safari・Edge 等の全モダンブラウザで使えます（IE10+も対応）。conic-gradient は Chrome 69+・Firefox 83+・Safari 12.1+・Edge 79+ 以降で利用可能です。IE非対応ですが、2024年時点での IE のシェアは0.1%以下のため実用上問題ありません。
コピーしたCSSはどこに貼り付ければ良いですか？: CSSファイルやスタイルタグ内に background: linear-gradient(...); または background-image: linear-gradient(...); として貼り付けます。Tailwind出力を選んだ場合は、className に bg-gradient-to-r from-[#色1] to-[#色2] の形式で貼り付けてください。
background と background-image の違いは何ですか？: background はショートハンドプロパティで、background-color や background-image 等を一括指定できます。background-image は画像（グラデーション含む）のみを指定するプロパティです。グラデーションのみ設定する場合はどちらでも動作しますが、background-color との併用が必要な場合は分けて書く方が確実です。
透明から色へのグラデーションを作るには？: transparent キーワードを使います。例: linear-gradient(transparent, #4f46e5)。または RGBA形式で rgba(79, 70, 229, 0) から rgba(79, 70, 229, 1) と指定するとブラウザ間の色補間が安定します（Safari で透明グラデーションが黒っぽく見える問題を防ぎます）。
conic-gradient はどんな用途に向いていますか？: パイチャート・カラーホイール・角度ゲージ・ローダーアニメーションに最適です。また、チェック柄（market/checker pattern）などの幾何学模様も conic-gradient で作れます。
グラデーションをアニメーションさせることはできますか？: CSSの animation プロパティでは gradient の色を直接アニメーションできませんが、background-position を動かす（background-size を大きくして）疑似アニメーション、または CSS Houdini（@property）を使ったアニメーションが可能です。シンプルには filter: hue-rotate() のアニメーションも効果的です。
Tailwind CSS でグラデーションを使うには？: Tailwind では bg-gradient-to-r from-purple-500 to-pink-500 のように方向と from/to/via クラスで指定します。カスタムカラーの場合は from-[#667eea] to-[#764ba2] のように角括弧記法を使います。当ツールの「Tailwind出力」ボタンでそのまま使えるコードを生成できます。
グラデーションの色を何色でも使えますか？: CSSの仕様上、color stop の数に技術的な制限はありません。ただし、あまり多くの色を使うと視覚的に濁りやすいため、実用的には 2〜5 色がおすすめです。当ツールでは最大 8 色まで追加できます。