テキスト・開発端末内で処理・アップロードなし
🔒ブラウザ内処理・アップロード不要
CSSグラデーションジェネレーター
CSSのlinear-gradient、radial-gradient、conic-gradientを視覚的に作成。中心・角度・HEX・繰り返しを調整し、コードを即コピー。
CSSグラデーションを視覚的に作る
タイプ・角度・中心・色の位置を調整し、通常または繰り返しグラデーションのCSSをコピーできます。
1. プレビュー
設定の変更はすぐに反映されます。
2. グラデーションを調整する
タイプを選び、色は2〜6個まで追加できます。
プリセットから始める
近い配色を選んでから、色と位置を微調整できます。
3. CSSをコピーする
プレビューと同じbackground宣言を、そのままスタイルシートへ貼り付けられます。
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);このツールは誰向け？
Webデザイナー、フロントエンドエンジニア、CSS初心者
使用場面
- 1美しい背景グラデーションを簡単に作りたい時
- 2グラデーションの角度・中心・色の位置を調整したい時
- 3ストライプや放射模様のrepeating-gradientを作りたい時
- 4CSSコードをコピペで使いたい時
よくある質問
CSSグラデーションとは何ですか？
CSSグラデーションは、2つ以上の色を滑らかに遷移させる背景効果です。linear-gradient（線形）、radial-gradient（円形）、conic-gradient（扇形）の3種類があります。
生成したCSSはどう使いますか？
生成されたCSSコード（例：background: linear-gradient(...)）を、スタイルシートのbackgroundプロパティにコピー＆ペーストするだけで使用できます。
ブラウザ対応はどうなっていますか？
対応状況は利用環境によって異なります。特にconic-gradientを使う場合は対象ブラウザで表示を確認し、必要なら先に単色のbackground-colorをフォールバックとして指定してください。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内で完結します。生成したCSSや設定がサーバーに送信されることはありません。
プリセットから選ぶこともできますか？
はい。人気のグラデーションパターンがプリセットとして用意されています。プリセットを選んでからカスタマイズすることで、素早く理想のグラデーションを作れます。
繰り返しグラデーションを作れますか？
はい。「模様を繰り返す」を有効にすると、選んだ種類に合わせてrepeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradientを生成します。1回分の幅も5〜100%で調整できます。
円形・扇形グラデーションの中心を動かせますか？
はい。横位置と縦位置を0〜100%で調整するか、9個の位置プリセットから選べます。生成するCSSにもatキーワード付きの中心位置を反映します。
HEXカラーコードを直接入力できますか？
はい。カラーピッカーの横へ#667eeaのような6桁HEXを入力できます。不正な値はCSSへ適用せず、直前の有効な色へ戻します。