CSSグラデーション ジェネレータ WEB制作
linear-gradient / radial-gradient / conic-gradient の3種類に対応したCSSグラデーション ジェネレータです。色を複数指定して停止位置・角度をスライダーで調整、リアルタイムプレビューしながらCSS / Tailwind 両形式でコピー可能。背景・ボタン・カードなどあらゆる要素のグラデーションを瞬時に作成できます。
CSS
Tailwind CSS (arbitrary value)
使い方
- グラデーションの種類 (Linear/Radial/Conic) をタブで選択
- Linear の場合は角度をスライダーで調整 (0° = 上向き / 90° = 右向き / 180° = 下向き)
- Radial の場合は形状 (Circle/Ellipse) を選択
- カラーストップを2つ以上指定 (色+停止位置%)・「+ カラー追加」で最大8色まで増やせる
- プリセットから一発で人気の組み合わせを呼び出し可能
- CSS / Tailwind 両形式で即コピー
グラデーションの種類と使い分け
- Linear (線形): 一方向に色が変化・最も汎用的。ボタン背景・ヒーロー背景に
- Radial (円形): 中心から外側へ広がる・スポットライト効果に最適
- Conic (円錐): 中心から円を描く・グラフ・装飾的なエフェクトに