Developer Tools
CSS Gradient Generator
🔒 ブラウザで動作
Create linear, radial, and conic CSS gradients with a live preview. Copy the CSS instantly. Free, runs in your browser.
このツールの使い方
- グラデーションの種類、方向、カラーストップを選択します。
- ライブプレビューを確認しながら、満足のいく結果になるまで調整します。
- 生成された CSS コードをスタイルシートにコピーします。
Color stops
0%
100%
CSS
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);
よくある質問
- グラジエントジェネレーターはデータをサーバーに送信しますか？
- いいえ。すべてのグラジエントのレンダリングと CSS コードの生成はブラウザ内で完全に行われます。どこにも送信されることはありません。
- どのような種類のグラジエントを作成できますか？
- CSS のリニアグラジエント（方向性のある色の移行）とラジアルグラジエント（円形または楕円形）を作成できます。どちらも複数のカラーストップに対応しています。
- 出力を CSS に直接使用できますか？
- はい。ツールはすぐに使える CSS コードを出力します。スタイルシートに直接コピーして貼り付けることができます。
- 複数のカラーストップに対応していますか？
- はい。必要なだけカラーストップを追加し、グラジエント軸上の位置を調整できます。