CSSグラデーションジェネレーター
linear / radial / conic をGUIで作成してCSSをコピー
カラーストップ
線形グラデーション
角度 deg
∘
放射状グラデーション
形状
サイズ
位置 X %
位置 Y %
扇形グラデーション
開始角度 deg
位置 X %
位置 Y %
プリセット
背景
比率
生成 CSS
Tailwind CSS（任意値）
このツールでできること
linear・radial・conicの3種類のCSSグラデーションをビジュアルエディターで生成するツールです。カラーストップの追加・位置調整・透明度設定、プリセット18種、Tailwind CSS v3クラスへの自動変換に対応しています。
使い方
- グラデーションタイプ（linear / radial / conic）を選択します
- カラーストップをピッカーで追加・編集します
- 方向・角度、各ストップの位置と透明度を調整します
- プレビューで見た目を確認しながら生成されたCSSをコピーします
- Tailwindクラスが必要な場合は「Tailwind」欄から取得します
こんな時に便利
- サイトのヒーロー背景やバナーにグラデーションをCSSで追加するとき
- 手書きでCSSを書かずにビジュアルで仕上げてそのままコピーしたいとき
- TailwindのグラデーションクラスへのCSSの変換が必要なとき
よくある質問
Q. linear・radial・conicはどう使い分けますか？
linear（直線）は背景に最もよく使われます。radial（放射）はバーストやビューム効果に、conic（円錐）はパイチャートや角度グラデーションに使います。
Q. 生成されたCSSはどのブラウザで動作しますか？
Chrome・Firefox・Safari・Edge等のモダンブラウザすべてに対応しています。IE11は非対応のため、IE対応が必要な場合は別途プレフィックスが必要です。
Q. Tailwindのグラデーションクラスに変換できますか？
はい。2〜3ストップのlinear-gradientはTailwind CSS v3のfrom-/via-/to-クラスに自動変換されます。透明度やconicタイプは非対応です。