🌈 CSSグラデーションメーカー

同じ2色でも、色の並べ方が変わると用途がまったく変わります。 迷ったら linear（直線）で十分です。

linear の角度は0度が上向きで、時計回りに増えます。 CSSの角度は数学の座標と向きが違うので、数字で合わせようとすると混乱します。8方向のプリセットから選んで、そこから微調整してください。

グラデーションで失敗するのはほぼ中間色です。 色と色のあいだは機械的に補間されるので、色相環で正反対にある色どうしをつなぐと、途中で必ずグレーを通ります。青とオレンジ、赤と緑のような組み合わせが典型です。

1. 色相を近づける —— 色相環で隣り合う範囲（30〜60度ぶん）に収めると濁りません。 プリセットのサンセットやオーシャンがこの形です。
2. 中間にカラーストップを足す —— どうしても遠い2色をつなぐなら、あいだに通したい色を1つ置きます。 プレビュー上のバーをクリックすればその位置に追加できます。
3. 明度差をつける —— 色相が近いと平坦に見えることがあります。片方を明るく、もう片方を暗くすると奥行きが出ます。

使う色そのものに迷ったら、配色パレット作成で 色相の近い組み合わせを作るか、画像からカラー抽出で 写真から2色を拾ってくると早いです。

出力しているのは background の値です。背景に敷くだけならそのまま貼れば終わりますが、 つまずきやすい場所が2つあります。

• 文字にグラデーションをかけたい ——color には指定できません。背景として敷いたうえでbackground-clip: text と color: transparent を併用します。
• 枠線にかけたい ——border-color にも指定できません。border: 1px solid transparent にして background-origin と 組み合わせるか、外側の要素に敷いて内側を塗りつぶします。
• 高さが0だと見えない —— 背景は要素の大きさぶんしか描かれません。 中身が空の div に貼って「表示されない」場合は、 たいてい高さが0です。

グラデーションは画像ではなくCSSなので、拡大しても粗くならず、ファイルも増えません。 同じ見た目をPNGで用意するより軽く済みます。