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

ヒーロー背景、ボタンのアクセント、カードの奥行き、イラストの補助まで、グラデーションは単調な面に表情を与える最短ルートです。色を2つ選ぶだけでもベタ塗りよりずっと豊かな印象になり、stopを増やすほどニュアンスのある背景が作れます。

見た目が濁って見えるときは、色を変える前に角度とstopの位置を動かしてみてください。明度が近い色どうしはなめらかに、差が大きい色どうしは強い印象になります。中央が灰色っぽくなる場合は、その間に中間stopを足すと、想定した2色のつながりが戻ってきます。

すべての処理はブラウザ内で完結します。入力した色がネットワーク上に送信されることはなく、生成されたCSSはそのままどのプロジェクトにも貼り付けられます。linear-gradientとradial-gradientは、すべての最新ブラウザで同じように動作します。