グラデーション CSS ジェネレーター
🔒ブラウザ内処理
グラデーションを作成し、CSS コードをコピーできます。ブラウザ内で完結しサーバーに送信されません。
カラーストップ位置 — ドラッグで移動、クリックで追加
プリセット
グラデーションタイプ
角度: 135°
カラーストップ
%
%
カラー形式
CSS
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Tailwind CSS
bg-linear-to-br from-[#667eea] to-[#764ba2]
よくある質問
グラデーションはサーバーに送信されますか?
されません。すべての処理はブラウザ内で完結します。
Linear・Radial・Conic の違いは何ですか?
Linear は直線方向、Radial は中心から放射状、Conic は扇形のグラデーションです。
Tailwind CSS のコードはそのまま使えますか?
Linear で標準の 8 方向かつ 3 色以内の場合は標準クラスで出力されます。それ以外は任意値形式（[background:...]）で出力されるため、Tailwind CSS v3 以降でそのまま利用できます。
カラーストップは何個まで追加できますか?
最大 8 個まで追加できます。最低 2 個必要です。
HEX・RGB・HSL の切り替えは何に使うのですか?
出力する CSS コードのカラー形式を選べます。デザインツールや既存コードに合わせて切り替えてください。