このツールについて
CSS グラデーションは、2 色以上の間を滑らかに遷移する、ブラウザーが生成する画像で、linear-gradient()、radial-gradient()、conic-gradient() の各関数で宣言します。各カラーストップは、色とオプションの位置 (グラデーションの線または弧に沿ったパーセント) を組み合わせます。線形グラデーションと円錐状グラデーションは遷移の方向を設定する角度を加え、放射状グラデーションは形状 (円または楕円) と原点の位置を取ります。
ヒーロー背景、ボタンの塗り、カードのオーバーレイ、区切り線のアクセントを、構文を手作業で調整することなくデザインするのに使えます。種類を選び、角度をドラッグし、最大 6 個のストップを追加して、貼り付けてすぐ使える background 宣言をコピーするだけです。プレビューはチェッカーボードの上に表示されるため、半透明のストップがどのように合成されるかを確認でき、プリセットは検証済みの 2 色および 3 色のパレットを出発点として提供します。
グラデーションは CSS 画像としてレンダリングされるため、固有のサイズを持ちません — 幅と高さを設定する (または背景として使用する) 必要があります。そうしないと要素がつぶれ、何も表示されません。
よくある質問
CSS の線形・放射状・円錐状グラデーションの違いは何ですか?
線形グラデーションは指定した角度で直線に沿って色を遷移させ、放射状グラデーションは中心点から円または楕円として外側へ放射し、円錐状グラデーションは時計の針のように中心点の周りで色を掃引します。そのため円錐状はカラーホイールや円グラフ効果によく使われます。
CSS グラデーションの角度はどのように機能しますか?
linear-gradient() では、0deg の角度はグラデーションを真上 (上端方向) に向け、90deg は右、180deg は下、270deg は左を指し、時計回りに増加します。conic-gradient() では、from <angle> の値は中心の周りで色の掃引の開始位置を回転させるだけです。
CSS グラデーションで 2 色を超える色を使えますか?
はい。グラデーションはコンマで区切った任意の数のカラーストップを受け付け、各ストップには #f00 0%, #ff0 50%, #00f 100% のようにオプションの位置を指定できます。ストップは記述した順に配置され、このジェネレーターは最大 6 個までサポートします。