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

CSSグラデーションは画像ファイルなしに作成される2色以上の間の滑らかな遷移です。種類：linear-gradient() — 指定した角度の直線に沿った色。radial-gradient() — 中心点から外側に放射状に広がる色。conic-gradient() — 中心点の周りを回転する色（円グラフのように、すべての最新ブラウザでサポート）。repeating-*バリアントはパターンを繰り返します。グラデーションはbackground-colorではなくbackground-imageプロパティの値です。

構文：linear-gradient(direction, color-stop1, color-stop2, ...)。方向：角度（0deg=下から上、90deg=左から右）またはキーワード（to right、to bottom left）。カラーストップ：オプションの位置を持つ色。例：linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%)。位置なしの場合、ストップは均等に分散されます。位置ありの場合：linear-gradient(to right, red 20%, blue 80%)は20%が赤、その後遷移、80%が青から終わりまでを意味します。

カラーヒント（遷移ヒントまたはミッドポイントとも呼ばれる）はグラデーション遷移の中間点がどこで起こるかを制御します。通常、遷移はストップ間で線形です — 中間点は2色の間の50%に正確に位置します。ヒントはその中間点を移動させます。例：linear-gradient(to right, red, 25%, blue) — 赤から青への遷移中間点は25%（赤側に近い）にあり、全体的に青に見えます。すべての最新ブラウザでサポートされています。

radial-gradient()は中心点から外側に楕円形または円形に放射されます。構文：radial-gradient(shape size at position, colors)。例：radial-gradient(circle at center, white, black)。conic-gradient()はカラーホイールや円グラフのように中心点の周りを色が回転します。構文：conic-gradient(from angle at position, colors)。例：conic-gradient(red, yellow, green, blue, red)。どちらもパーセントの位置でカラーストップをサポートしています。

Tailwindは線形グラデーションをサポートしています：bg-gradient-to-{direction}（例：bg-gradient-to-r）+ from-{color} + via-{color}（オプション）+ to-{color}。例：class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"。放射状/円錐グラデーションや複雑なカスタムグラデーションには[任意値]構文を使用します：bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)]、またはtailwind.config.jsのbackgroundImageにカスタムグラデーションを追加します。Tailwind v3.3+は任意のグラデーションサポートを改善しました。