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

仕組み

各カラーストップは、色と0〜100のポジションを持つオブジェクトです。変更のたびに、出力を組み立てる前にストップがポジション順に並べ替えられるため、どの順番で追加しても常に正しい結果になります。それらは選んだタイプに応じてlinear-gradient(<角度>deg, ...)またはradial-gradient(circle, ...)に結合されます。同じ文字列がプレビューの背景として適用され、出力としても表示されるため、プレビューはコピーするCSSそのものを実際に描画しています。近似ではありません。

2つの鮮やかな色の間のグラデーションが中間で色あせて見える場合、それはツールの不具合ではありません。ブラウザはデフォルトでsRGBカラースペースでグラデーションを計算しており、特定の色の組み合わせ(青から黄色が典型例)の間の直線経路は、くすんだ低彩度のグレーを通ります。解決策は、本当に欲しい鮮やかな色の中間ストップを追加することで、このツールはそれを簡単にします。

グラデーション全体はこのページのJavaScriptで組み立てられ適用されます。色を選んだり角度スライダーを動かしたりしてもネットワークリクエストは一切発生しません。開発者ツールのネットワークタブで自分で確認できます。