🌈 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 個が一般的です。