CSSグラデーションジェネレーター — 視覚的にグラデーション作成
線形・放射状のCSSグラデーションをライブプレビューで作成し、すぐ使えるbackgroundコードをコピーできます。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
このツール、役に立った?タップでリアクション
このツールについて
線形・放射状のCSSグラデーションを視覚的にデザインできます。カラーストップを追加してドラッグで位置を調整し、角度を設定すると、ライブプレビューがその場で更新されます。仕上がったら、そのまま貼り付けられる background コードをコピーしてスタイルシートに使うだけ。すべてブラウザ内で動作します。
よくある質問
CSSグラデーションはどうやって作りますか?
線形か放射状かを選び、2色以上を選んでストップの位置を決め、角度や中心を調整します。ツールが対応する background の値を自動で書き出すので、それをコピーしてCSSのルールに貼り付けるだけです。
線形グラデーションと放射状グラデーションの違いは何ですか?
線形グラデーションは指定した角度の直線に沿って色が変化し、放射状グラデーションは中心点から円や楕円状に外側へ向かって色が変化します。線形は背景やボタンに、放射状はスポットライトや柔らかな光の表現に向いています。
何かサーバーに送信されますか?
いいえ。プレビューも生成されるコードもすべてブラウザ内で作られるため、デザインに関する情報がアップロード・保存されることはありません。