概要 CSS グラデーション
知覚的一様なグラデーション
使い方
複数のストップを持つ線形・放射グラデーションを作り、角度や色空間を調整して完成した CSS をコピーできます。
CSS グラデーション
0%
100%
線形・放射状・円錐グラデーション
線形は指定角度の直線に沿って色を混ぜ、放射状は中心から外側へ広がり、円錐は色相環のように中心の周りを掃引します。
各色ストップを 0%〜100% の間で動かして開始と終了を調整し、生成された CSS をコピーします。
CSS 出力とパフォーマンス
CSS グラデーションは画像リクエストなしでブラウザが描画するため、任意の解像度に拡大でき、高密度画面でも鮮明です。
多くの UI では 2〜3 個のストップで十分です。ストップが多すぎると描画負荷は小さいものの、保守が難しくなります。
よくある質問
生成したグラデーションの使い方は？
background 宣言をコピーして CSS ルールに貼り付けます。色・角度・位置を変えるとプレビューとコードが同期します。
どの角度を使うべきですか？
0deg は上、90deg は右、180deg は下です。プリセットボタンで一般的な方向に切り替えられます。
透明なグラデーションは作れますか？
はい。コピー後に CSS で透明ストップまたは rgba 値を使ってください。
メールで使えますか？
多くのメールクライアントはグラデーションを無視します。グラデーションの前に単色のフォールバックを用意してください。