🌈 CSSグラデーションジェネレーター

概要

コードを一行も書かずにCSSグラデーションをビジュアルで構築できるツールです。linear-gradientとradial-gradientを選択し、角度や形状を設定し、カラーピッカーと位置スライダーでカラーストップを管理して、リアルタイムでプレビューできます。8つの内蔵プリセット（Sunset、Ocean、Aurora、Neonなど）ですぐに始められます。すべての処理が純粋なJavaScriptによってブラウザ内でローカルに実行されるため、色データやデザイン情報がデバイスの外に出ることはありません。サーバーもアカウントもトラッキングも一切ありません。

使い方

1. Gradient typeドロップダウンから、グラデーションの種類（LinearまたはRadial）を選択してください。
2. 線形グラデーションの場合は、スライダーまたは数値入力で角度（0〜360°）を設定します。放射状グラデーションの場合は、形状としてEllipseまたはCircleを選択してください。
3. Color Stopsパネルのカラースウォッチをクリックしてカラーピッカーを開き、位置入力をドラッグして各ストップを任意の場所に配置してください。
4. + Add Stopをクリックすると、最も大きな間隔に新しいカラーストップが自動挿入されます。✕ボタンをクリックすると任意のストップを削除できます（最低2つ必要）。
5. Copy CSSをクリックすると、完成したbackground: linear-gradient(…)またはradial-gradient(…)の宣言がクリップボードにコピーされます。そのままスタイルシートに貼り付けてください。

よくある質問

CSSグラデーションジェネレーターは無料で使えますか？

はい、完全無料です。サブスクリプション不要、アカウント不要、隠れた利用制限もありません。ページを開いてすぐにグラデーションを作り始められます。

このツールはインターネット接続なしでオフラインで使えますか？

はい。ページを一度読み込めば、外部API呼び出しやCDN依存、サーバーリクエストなしで完全にオフライン動作します。飛行機内やネットワーク制限環境でも安心して使用できます。

色データやデザインはサーバーに送信されますか？

いいえ。グラデーションの生成とプレビューのレンダリングはすべてブラウザ内のJavaScriptでローカルに行われます。色の選択内容はブラウザのlocalStorageにのみ保存され、どこにも送信されません。

linear-gradientとradial-gradientの違いは何ですか？

linear-gradientは指定した角度（例：135deg）に沿って直線上で色を遷移させます。radial-gradientは中心点から楕円または円形に色を外側へ放射します。どちらも現代のすべてのブラウザで動作する標準CSSを出力します。

カラーストップはいくつまで追加できますか？

内蔵の制限はありません。必要な数だけカラーストップを追加できます（最低2つ）。新しいストップはグラデーションの最も大きな間隔に自動配置され、その位置の補間された色があらかじめ入力されてスムーズな出発点が提供されます。