CSSグラデーションジェネレーター
linear-gradient・radial-gradientをビジュアルで作成できます
プリセット
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);CSSグラデーションジェネレーターとは
CSSのlinear-gradient（線形グラデーション）またはradial-gradient（放射状グラデーション）をビジュアルで作成し、コードをコピーできるツールです。デザイン作業の効率化に役立てください。
よくある質問
linear-gradientとradial-gradientの違いは？
`linear-gradient` は直線方向にグラデーションをかけ、見出しの背景・ボタン・大きなヒーローセクションに向きます。`radial-gradient` は中心点から放射状にグラデーションをかけ、円形・楕円形のグラデーションを作れるためアイコン背景・装飾要素に向きます。さらに `conic-gradient`（円錐状）もあり、円グラフ風や時計の文字盤の表現に使えます。
生成されたCSSはどのブラウザに対応していますか？
現代のすべての主要ブラウザ（Chrome、Firefox、Safari、Edge）で完全対応しています。古いブラウザサポートが必要な場合: IE10以降は `linear-gradient` 対応、IE9以下は `-ms-filter` プロパティが必要、`conic-gradient` は2020年以降のブラウザのみ対応。Can I Use（caniuse.com）で対象ブラウザのサポート状況を事前確認してください。
カラーストップは何個まで追加できますか？
本ツールでは UI上 最大8個まで追加できます。CSSの仕様上はさらに多くのカラーストップを設定可能ですが、視覚的にはシンプルな2〜4色のグラデーションが美しく、複雑にすると違和感が出やすくなります。マルチカラーの虹色グラデーションでは6色程度が限界で、それ以上は色の境界が目立ちすぎる傾向があります。
透明度（アルファ）を使えますか？
本ツールのカラーピッカーは16進数（#RRGGBB）形式に対応しています。透明度を含めたい場合は、(1) 8桁の16進数（#RRGGBBAA）に手動変換、(2) 生成されたCSSコードをコピーしてから `rgba(R, G, B, A)` 形式に書き換え、(3) `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5))` のように透明→不透明グラデーションでオーバーレイ効果、を作れます。
グラデーション角度の指定方法は？
角度は (1) `to top`、`to right`、`to bottom-left` 等のキーワード、(2) `45deg` のように度数で指定、両方使えます。CSSの角度系では「上方向 = 0deg」「右 = 90deg」「下 = 180deg」「左 = 270deg」（時計回り）。`to bottom right` ≒ `135deg`。本ツールはスライダーでビジュアル調整できるので、思った通りの角度を視覚で確認できます。
グラデーションをアニメーションさせるには？
グラデーションそのものは CSS Transition で直接アニメーションできません（現在の仕様では）。代わりに、(1) `background-size` を200%以上にして `background-position` を transition で動かす、(2) CSS Variables（カスタムプロパティ）で色を動的に変更、(3) 2枚のグラデーション要素を重ねて opacity をアニメーション、(4) WebGL/Canvas を使う、などの手法があります。
パフォーマンスへの影響は？
CSSグラデーションは画像背景と比べて、(1) ファイルサイズがゼロ（CSSテキストのみ）、(2) 任意のサイズで美しく描画、(3) ブラウザのGPU描画で軽量、というメリットがあります。一方で複雑な `radial-gradient` を多用するとレンダリング負荷が増えるため、ヒーローセクションや見出しなど目立つ箇所に絞って使うのが効果的です。
デザイン的に美しいグラデーションのコツは？
(1) 同じ色相の濃淡を使う（モノクロ・モノクロマティック）、(2) 隣接色（HSL の色相環で隣り合う色）を組み合わせる、(3) コントラスト比2:1〜3:1 程度に抑える、(4) パステル調なら彩度を50%程度に、(5) 視線誘導を意識した方向（左上→右下が自然）、(6) 「uiGradients.com」「coolors.co」など参考サイトでインスピレーション取得、を意識すると洗練されます。