CSS グラデーションジェネレーター
線形または放射状のCSSグラデーションを視覚的に作成し、ブラウザ上ですぐに使えるCSSをコピーできます。
🔒 お使いのブラウザ内でローカル処理されます
Loading…
使い方
- グラデーションの種類として「線形」または「放射状」を選びます。線形の場合は、スライダーをドラッグするか値を入力して角度（度）を設定します。
- 各カラーストップにはカラースウォッチと位置（0〜100%）があります。スウォッチをクリックして色を選ぶか、位置の値を入力してグラデーション内での位置を移動できます。
- 「ストップを追加」で最大5つまでカラーストップを追加できます。各ストップ横の「削除」でそのストップを削除できます（最低2つのストップが必要です）。
- CSS出力の上にあるプレビューボックスは、いずれかの項目を調整するたびに即座に更新されます。ボタンを押す必要はありません。
- 「コピー」をクリックすると、生成されたCSS宣言をコピーでき、そのままスタイルシートに貼り付けられます。
特徴
- 線形（角度調整可能）と放射状の両方のグラデーションに対応
- 最大5つのカラーストップに対応し、それぞれ独自の色と位置を設定可能
- いずれかの項目を編集するとリアルタイムで更新されるプレビューボックス
- 貼り付け可能なCSS宣言をワンクリックでコピー
- 完全にクライアントサイドで処理 — グラデーションがブラウザの外に出ることはありません
よくある質問
このツールは私のグラデーションをどこかに送信しますか？
いいえ。グラデーションの作成とプレビューはすべてローカルのJavaScriptとCSSで行われます。データがサーバーにアップロードされたり送信されたりすることはありません。
カラーストップはいくつまで追加できますか？
最大5つまでです。グラデーションが成立するには最低2つのストップが必要なため、2つまで減らすと「削除」ボタンは無効になります。
角度の設定は放射状グラデーションにも影響しますか？
いいえ。このツールの放射状グラデーションは常に中心から円形に外側へ広がるため、角度の設定は線形グラデーションにのみ適用されます。
2つのストップが同じ位置にある場合はどうなりますか？
問題ありません。なめらかなブレンドではなく、はっきりとした色の境界を意図的に作るために使うこともできます。両方のストップは生成されるCSSにそのまま残ります。
出力結果をそのまま自分のCSSファイルに貼り付けられますか？
はい。出力ボックスには完全な `background: ...;` 宣言が表示されるため、そのままスタイルシートやインラインスタイルに貼り付けて使用できます。