CSS グラデーションジェネレーター
最大 4 つのカラーストップで、線形・放射・円錐の CSS グラデーションを作成。コードは CSS または Tailwind v4 のクラスとしてコピーできます。
CSS グラデーションの作り方
- 「種類」のボタンで、線形、放射、円錐のいずれかを選びます。
- カラーストップをクリックして色を変更します。「ストップを追加」と「ストップを削除」で、ストップを 2〜4 個の範囲で調整します。
- 線形グラデーションでは、角度を 0〜315 度の範囲で 45 度ずつ設定します。アイデアが欲しいときは「ランダム」を押します。
- 書き出し形式を CSS と Tailwind v4 で切り替え、コピーボタンを押してコードを持ち帰ります。
できること
3 種類のグラデーション
角度に沿った線形グラデーション、中心から広がる放射グラデーション、点の周りを回る円錐グラデーションを作れます。
OKLCH 補間の CSS
CSS には、すべてのブラウザーが理解できる sRGB 版と、同じグラデーションを OKLCH で補間した版が含まれます。対応ブラウザーでは中間の色も両端と同じくらい鮮やかに保たれます。
Tailwind v4 で書き出し
グラデーションを CSS の代わりに Tailwind v4 のユーティリティクラスとしてコピーできます。
ライブプレビュー
色、角度、種類を変えると、プレビューがすぐに更新されます。
ライブラリから始める
グラデーションライブラリの好きなグラデーションを、ストップと角度を読み込んだ状態でメーカーで開けます。
よくある質問
CSS グラデーションを作るには？
種類を選び、2〜4 色を設定し、線形グラデーションなら角度も決めます。ジェネレーターが background の宣言を書き出すので、それをスタイルシートにコピーします。
線形、放射、円錐グラデーションの違いは？
線形グラデーションは、ある角度の直線に沿って色が移り変わります。放射グラデーションは中心点から外側へ広がります。円錐グラデーションは、カラーホイールや円グラフのように中心点の周りを回って色が変わります。
グラデーションの中間がグレーっぽく濁るのはなぜ？
鮮やかな 2 色を sRGB で混ぜると、中間でくすんだ色を通ることがあります。OKLCH で補間すると中間が鮮やかに保たれやすく、このジェネレーターの CSS には対応ブラウザー向けにその版が含まれています。
このグラデーションを Tailwind CSS で使えますか？
はい。書き出し形式を Tailwind v4 に切り替えて、クラスをコピーしてください。
カラーストップはいくつまで追加できますか？
2〜4 個です。色を段階的に並べた長いグラデーションが欲しいときは、グラデーションパレットジェネレーターを使ってください。