入力を貼り付ける
CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。
CSS グラデーション生成ツール
CSS グラデーションを生成。
使い方
貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。
ツールを実行する
変換または実行をクリック。結果はすぐに表示されます。
出力を確認する
生成コードと注意書きを公開前に確認します。
コピーして使う
出力をコピーしてプロジェクトに貼り付けます。
このツールについて
2 つの色をつなぐ線形グラデーションを組み立ててプレビューし、素の CSS と Tailwind の任意値背景クラスの両方をコピーできます。
例
初期設定では、スカイブルーからグリーンへ斜めに変化する背景を表示します。
入力
135deg · #0ea5e9 → #22c55e出力
background: linear-gradient(135deg, #0ea5e9, #22c55e);ヒント
色の停止点が多いブランドグラデーションは、CSS 変数にまとめて管理したほうが保守しやすいです。