🌈 CSSグラデーション生成器

CSSグラデーション生成器について

このグラデーション生成器は、すべてブラウザ内で完結します。グラデーションタイプ（線形・放射・円錐）を選び、角度を設定し、必要なだけカラーストップを追加して、生成されたCSSコードをプロジェクトに直接コピーできます。サーバーへのアップロードは一切ありません。

グラデーションタイプ

• 線形 —— 色が指定した角度の直線に沿って遷移。背景やボタンに最も一般的なグラデーションタイプ。
• 放射 —— 色が中心点から外側に放射。スポットライト効果や円形要素に最適。
• 円錐 —— 色が中心点の周りをパイチャートのようにスイープ。カラーホイールやゲージ効果の作成に便利。

生成器の使い方

1. ドロップダウンからグラデーションタイプを選択します。
2. 線形グラデーションの場合、角度スライダー（0–360°）を調整します。
3. カラーピッカーを使ってカラーストップを追加・削除・変更します。
4. プレビューが即座に更新されます。
5. CSSをコピーをクリックして生成されたコードをクリップボードにコピーします。

よくある質問

カラーストップはいくつ追加できますか？ ハードリミットはありません。ほとんどのブラウザは数十個のカラーストップをサポートしますが、クリーンなグラデーションには通常2〜5個です。

円錐グラデーションはどこでもサポートされていますか？ 円錐グラデーションはすべてのモダンブラウザでサポートされています。古いブラウザ向けには線形のフォールバックを検討してください。

商用プロジェクトに使えますか？ はい。生成されたCSSは自由に任意のプロジェクトで使用できます。