CSS グラデーション生成ツール
2色または3色のカラーストップで美しい線形・放射 CSS グラデーションを作成。リアルタイムでプレビューし、CSS をすぐコピー。登録不要、完全ブラウザ完結。
数秒でグラデーションを作る。 2〜3色を選び、線形か放射かを選んで角度を設定すれば、貼り付け可能な CSS がコピーできます。すべてブラウザ上で処理され、アップロードは一切されません。
色を変更するとプレビューが更新されます。
CSS グラデーションについて
線形と放射
線形グラデーションは指定角度の直線に沿って流れ、放射グラデーションは中心から円形に広がります。
グラデーションの活用法
ボタンやヒーローセクション、カード、背景に奥行きを出し、画像ファイルなしでページを軽く保てます。
よくある質問
3色以上使えますか？
本ツールは最大3色まで対応。それ以上は生成された CSS を手動で拡張できます。
放射グラデーションに角度は関係しますか？
いいえ。角度は線形のみ適用され、放射は中心から均一に広がります。
色データはアップロードされますか？
いいえ。すべてブラウザ内で処理されます。