使い方
- グラデーションタイプを選択
ツールバーで「linear」（線形）または「radial」（放射状）を選択します。線形の場合は角度も設定できます。
- カラーストップを設定
ツールバーのカラーピッカーで色を選び、「ストップ追加」でカラーストップを追加します。既存のCSS gradient構文を入力欄に貼り付けることもできます。
- CSSコードをコピー
プレビューを確認しながら、「コピー」ボタンで生成されたCSSコードをコピーできます。
CSSグラデーション生成ツール の具体例
線形グラデーション
入力
出力
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);2つのカラーストップで斜めのグラデーションを生成します。
放射状グラデーション
入力
出力
background: radial-gradient(circle, #ff6b6b 0%, #556270 100%);中心から外側に向かって広がるグラデーションを生成します。
特長
- linear-gradient（線形）とradial-gradient（放射状）対応
- 角度・方向のカスタマイズ（線形グラデーション）
- カラーストップの追加・削除・色変更
- リアルタイムプレビュー表示
- 既存のCSS gradient構文の解析・編集
- ワンクリックでCSSコードをコピー
- 入力データはブラウザ内で処理（サーバー送信なし）
よくある質問
カラーストップは何個まで追加できますか？
CSS仕様上の制限はありませんが、このツールでは実用的な範囲で複数のカラーストップを追加できます。
conic-gradient（円錐形）には対応していますか？
現在はlinear-gradientとradial-gradientに対応しています。conic-gradientは今後のアップデートで対応予定です。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内のJavaScriptで行われます。データが外部に送信されることはありません。