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

使い方

1. 線形か放射状を選択。
2. 角度（線形）または形（放射状）を調整。
3. カラーストップを編集し、位置スライダーをドラッグ。
4. CSS ルールまたは Tailwind クラスをコピー。

よくある質問

Tailwind の任意値とは？

bg-[…] 形式の任意値クラスを使えば、別の CSS ファイルを書かずに Tailwind プロジェクトへ直接グラデーションを適用できます。

カラーストップは何個まで？

何個でも — 通常 3〜5 個が見栄え良いですが、数に制限はありません。

グラデーションは保存される？

最後のデザインはブラウザのローカルストレージに自動保存され、次回開いた時に復元されます。

なぜ Tailwind クラスにアンダースコア？

Tailwind は空白をクラス区切りとして扱うため、任意値では空白の代わりにアンダースコアを使います。

関連ツール