Gradient Generator
Browse curated CSS gradients or build linear, radial, and conic ones
#ff9a3c → #ff5e62
#f83600 → #f9d423
#ffd3a5 → #fd6585
#f6d365 → #fda085
#b24592 → #f15f79
#ffb347 → #ff7e5f → #d4145a
#2193b0 → #6dd5ed
#e0f7fa → #80deea → #0097a7
#43cea2 → #185a9d
#a1c4fd → #c2e9fb
#1e3c72 → #2a5298
#0ba360 → #3cba92
#fbc2eb → #a6c1ee
#fff1c1 → #ffd1dc
#e0c3fc → #8ec5fc
#d4fc79 → #96e6a1
#fdcbf1 → #e6dee9
#fef9d7 → #d299c2
#0f2027 → #203a43 → #2c5364
#232526 → #414345
#141e30 → #243b55
#1f1c2c → #928dab
#1e293b → #020617
#093028 → #237a57
#f72585 → #7209b7 → #3a0ca3
#00c6ff → #0072ff
#f7971e → #ffd200
#00f260 → #0575e6
#ff0080 → #ff8c00 → #ffe600 → #00d4ff → #ff0080
#ee0979 → #ff6a00
#4f46e5 → #7c3aed → #db2777
#2dd4bf → #0f766e → #042f2e
#0ea5e9 → #6366f1
#fde68a → #fca5a5 → #c084fc
#312e81 → #7e22ce → #f472b6
#1e1b4b → #6366f1 → #1e1b4b → #0f172a
#ffffff → #f1f5f9
#f8fafc → #e2e8f0
#1e293b → #0f172a
#eff6ff → #dbeafe
#fafaf9 → #e7e5e4
#ffffff → #e0e7ff
グラデーションジェネレーターとは
2 つのモードを持つグラデーション作業ツールです。「探す」には暖色、寒色、パステル、ダーク、ビビッド、ヒーロー背景、UI 背景の用途別に選んだ 42 種類のグラデーションがあります。「作成」では 2〜6 個のカラーストップを使って線形・放射・円錐の CSS グラデーションを編集できます。
使い方
- 1.「探す」でグループごとに絞り込むか、「作成」に切り替えます。
- 2.任意のカードから CSS や Tailwind クラスをコピーするか、エディターで開きます。
- 3.「作成」で種類と角度を選び、各ストップをカラーピッカー、16 進入力、位置スライダーで調整します。
- 4.ランダム（シード付き）、反転、ストップを追加、リセットを使えます。
- 5.CSS、Tailwind、SVG をコピーするか、プリセットサイズで PNG を書き出します。
出力とオプション
CSS 出力には単色の background-color フォールバックと background-image が含まれます。Tailwind 出力は bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)] のような任意値クラスで、スペースはアンダースコアになります。SVG 出力は線形と放射グラデーションに対応します。PNG はキャンバスにネイティブ描画し、フル HD、Open Graph、正方形、ストーリー、バナー、QHD のサイズで書き出します。同じシードからは常に同じランダムグラデーションが生成されます。
制限とプライバシー
SVG にはネイティブの円錐グラデーションがないため、円錐グラデーションは CSS または PNG でのみ書き出せます。円錐の PNG 書き出しには、キャンバスの円錐グラデーションに対応したブラウザーが必要です。お気に入りと保存したグラデーションはこのブラウザー（localStorage）にのみ保存され、同期されません。プレビューと書き出しはすべてお使いの端末で生成されます。
