このツールについて

2 つの色をつなぐ線形グラデーションを組み立ててプレビューし、素の CSS と Tailwind の任意値背景クラスの両方をコピーできます。

使い方

色と角度を指定してグラデーションを生成し、プレビュー帯で見え方を確認したうえで、background 宣言か bg-[linear-gradient(…)] クラスをコピーします。

初期設定では、スカイブルーからグリーンへ斜めに変化する背景を表示します。

入力

135deg · #0ea5e9 → #22c55e

出力

background: linear-gradient(135deg, #0ea5e9, #22c55e);

色の停止点が多いブランドグラデーションは、CSS 変数にまとめて管理したほうが保守しやすいです。

色の分岐点を 3 つ以上にできますか?

このジェネレーターは 2 点の線形グラデーションを作ります。複数点のブランドグラデーションは、出力をコピーして手動で点を追加するか、CSS 変数で管理してください。

Tailwind の出力はどう使いますか?

bg-[linear-gradient(…)] クラスを要素に付けるだけです。Tailwind が任意値として読み取るので、設定の変更は不要です。