🌈 CSS グラデーション ジェネレーター
linear / radial / conic グラデーションをビジュアル編集。カラーストップを自由に追加・削除し、CSS コードをコピーできます。
✅ 完全無料・登録不要・サーバー送信なし
🔒 プライバシーについて
- ・すべての処理はブラウザ内で完結します
- ・入力データは一切サーバーに送信されません
- ・保存ログ・履歴・データベース等は存在しません
- ・登録・ログイン・課金は一切不要です
カラーストップ
プリセット
📖 使い方
-
1
種類を選ぶlinear / radial / conic から選択。種類により角度・形状の入力欄が切り替わります。
-
2
カラーストップを編集カラーピッカーで色を選び、位置スライダーで配置。追加・削除ボタンで個数を変更可能。
-
3
CSS をコピー生成された CSS をコピーボタンでクリップボードへ。background プロパティに貼り付けてください。
❓ よくある質問
入力データはサーバーに送信されますか？
いいえ。すべてブラウザ内で完結します。Network タブで確認可能です。
ブラウザのサポート状況は？
linear / radial は全モダンブラウザ。conic-gradient は Chrome 69+ / Firefox 83+ / Safari 12.1+ で対応。
カラーストップは何個まで追加できますか？
上限は設けていません。実用上は 2 ～ 10 個が一般的です。
🔗 関連ツール
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
✅
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。