CSS グラデーションジェネレーター

ライブプレビューを見ながら、CSS の線形・放射状グラデーションをデザインできます。カラーストップを追加し、角度を設定して、すっきりした background の CSS をコピーするだけ。すべての操作はブラウザ内で完結します。

プレビュー

グラデーション

角度

90°

カラーストップ

#f5530c

#ffa94d

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

CSS グラデーションジェネレーターの使い方

1
グラデーションの種類を選ぶ
線形と放射状を切り替えます。線形グラデーションでは、角度スライダーで方向を度単位で設定することもできます。
2
ストップを追加して色を決める
スウォッチをクリックして各色を選び、位置を0から100パーセントの範囲で設定します。複数の色を混ぜるにはカラーストップを追加し、シンプルにするにはストップを削除します。
3
リアルタイムでプレビュー
プレビューパネルには、ブラウザで実際に表示されるとおりのグラデーションが映し出され、変更するたびに即座に更新されます。

4
CSS をコピーする
生成された background のコードをコピーして、スタイルシートに貼り付けます。あらゆるモダンブラウザで動作する標準的な CSS です。

CSS グラデーションはどうやって作りますか?

線形か放射状を選び、角度を設定して、好きなだけカラーストップを追加します。プレビューはリアルタイムで更新され、その下にはすぐに使える CSS が background プロパティとして表示されるので、スタイルシートにそのままコピーできます。

線形グラデーションと放射状グラデーションは何が違いますか?

線形グラデーションは色を直線に沿って混ぜ合わせ、その方向を角度（度単位）で調整します。放射状グラデーションは中心から円状に外へ向かって色が広がります。どちらも同じカラーストップを使い、混ざり方の形だけが変わります。

カラーストップとは何ですか?

カラーストップとは、グラデーション上の0から100パーセントの位置に紐づいた色のことです。ストップが2つあれば2色のシンプルなグラデーションになり、増やすほど複数の色が豊かに混ざり合うグラデーションを作れます。位置の値を変えると、それぞれの色が置かれる場所を動かせます。

作ったグラデーションをプロジェクトで使うには?

生成されたコードをコピーして、div や section などお好みの要素の background プロパティに貼り付けます。純粋な CSS なので、画像やライブラリを使わなくても、あらゆるモダンブラウザで動作します。

入力したデータはサーバーにアップロードされますか?

いいえ。すべての操作はブラウザ内だけで実行されます。作成した内容がアップロード・記録・保存されることはないため、作業内容は完全にプライベートに保たれ、このツールはオフラインでも動作し続けます。