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

CSS グラデーションジェネレーターとは？#

CSS グラデーションとは、2 つ以上の色の間の滑らかな変化で、ブラウザが線、放射、角度に沿って描画するものです。うまく使えば、1 つのグラデーションが 200 キロバイトの背景画像を置き換えられます — あらゆるサイズにスケールし、どの画面でも鮮明で、CSS 1 行で収まります。難しいのは構文を書くことではなく、色や角度、ストップを調整しながら結果を 見る ことです。

本ページはそのためのライブワークベンチです。ストップをドラッグし、角度をスライドさせ、5 種類のグラデーションを切り替えると、スタイルシートが必要とする正確な linear-gradient(...)（あるいは radial-、conic-、反復）宣言を出力します。さらに、各色を再利用可能なトークンに変える、貼り付け即席の Tailwind v4 @theme スニペットも生成します。

使い方#

1. グラデーションタイプ を選びます。
   • 線形 — 選んだ角度の直線に沿って色が遷移します。既定値で、ほとんどのユースケースをカバーします。
   • 放射状 — 中心点から外側に色が放射されます。スポットライトやビネットに適しています。
   • 円錐形 — 円グラフのように中心周りを色が掃引します。カラーホイールやスピナーの背景に便利です。
   • 反復線形 / 反復放射状 — 同じグラデーションをタイル状に並べ、縞や同心円を生成します。
2. 線形と円錐形では 角度 スライダー（0〜359°）をドラッグします。プレビューがリアルタイムで更新されます。0° が上、90° が右、135° が古典的な左上から右下への対角です。
3. 放射形では 形状 を選びます — 円 か 楕円（レスポンシブな全面背景の既定値）。
4. カラーストップ を管理します。
   • 各ストップには色見本と、グラデーションバー上の位置（0〜100%）があります。
   • バー上のハンドルをドラッグしてストップを移動するか、正確な位置を入力します。
   • ストップを追加 をクリックして新しいストップを挿入し、ストップの × をクリックして削除します。
   • グラデーションには最低 2 つのストップが必要です。
5. 下部の 2 つの出力を読みます。CSS（生のグラデーション値）と Tailwind v4（各色を --color-grad-* トークンとして登録する @theme ブロックと、それらを消費する .bg-gradient ユーティリティ）。それぞれの横のコピーを使います。

主な機能#

• 1 つのツールで 5 種類のグラデーション。 線形、放射、円錐、2 つの反復バリアント — 色を再入力せずに切り替えられます。
• ライブでピクセル正確なプレビュー。 右側の大きなブロックが、実際に出荷するグラデーションです。見ているものがそのままスタイルシートに渡ります。
• ドラッグハンドル式のストップバー。 任意のカラーストップをドラッグで再配置できます。移動に合わせてパーセンテージが更新されます。
• デュアル出力。 手書きスタイルシート向けの生の CSS と、ユーティリティファーストプロジェクト向けの Tailwind v4 @theme スニペット（各ストップが --color-grad-* トークンになり、.bg-gradient ユーティリティが消費） — 両者は常に同期します。
• 角度の読み取り。 スライダーの横に正確な度数が表示され、他の場所でもグラデーションを正確に再現できます。
• アップロードゼロ。 色、ストップ、角度はブラウザの外に出ません。

実例#

インディゴからティールへと向かう、落ち着いたやや対角のブランドグラデーションが欲しいとします。線形 を選び、角度を 135° にし、2 つのストップを使います。

• ストップ 1: 0% の #4F46E5（インディゴ）
• ストップ 2: 100% の #0D9488（ティール）

CSS 出力は次のようになります。

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

Tailwind v4 スニペットは次の通りです。

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Tailwind 出力は hex 値をインラインせず、各ストップを @theme 内に --color-grad-* デザイントークンとして登録した上で、単一の .bg-gradient ユーティリティを var(...) でそれらに向けます。1 つの変数を変えれば、それを消費するすべての場所が一斉に更新されます。中央に 3 つ目、より柔らかい色を追加したいですか？ ストップを追加 をクリックして 50% に #7C3AED を設定すると、ティールが --color-grad-3 にシフトしつつスニペットに --color-grad-2: #7C3AED トークンが追加されます — ストップは常に位置で再ナンバリングされるため、名前がバーと整合しなくなることはありません。

よくある質問#

線形、放射、円錐の違いは何ですか？#

線形 は角度で定義される直線に沿って遷移します。放射 は 1 点から外側へ遷移し、円や楕円の色を生成します。円錐 は 1 点の 周りを 遷移します — 各角度が異なる色相を持つカラーホイールが回転する様子を想像してください。それぞれの反復バリアントはパターンをタイル状にして、縞やリングを作ります。

なぜ Tailwind 出力は色をインラインせず --color-grad-* 変数を定義するのですか？#

Tailwind v4 は設定を @theme ブロック経由で CSS に移しました。ここで各エントリが再利用可能なデザイントークンになります。各ストップを --color-grad-1、--color-grad-2、… として出力し、.bg-gradient に var(...) で参照させることで、この 1 つの背景だけでなく、枠線、テキスト、シャドウなどどこでも再利用できるパレットを手に入れられます。1 つの変数を編集すれば、すべての消費元が一斉に更新されます（Tailwind v3 には @theme がありません。代わりに CSS 出力をスタイルシートに貼ってください）。

滑らかなブレンドではなく、ハードな色の段差を作れますか？#

はい。2 つのストップに同じ位置を与えます — 例えば #000 50% と #fff 50%。間に距離がないためブレンドの幅がゼロになり、遷移がハードな線になります。これが、画像なしで縞や帯の背景を作る方法です。

円錐グラデーションがデザインツールと比べて回転して見えます。なぜですか？#

ツールによって円錐グラデーションの開始角度の測り方が異なります。CSS は from 角度を上（12 時方向）から時計回りに測ります。デザインツールが右（3 時方向）から、あるいは反時計回りに測る場合は、プレビューが一致するまで 90° を引くか足す（符号を反転する）してください。