画面とCSSで同じ方向にする
- 入力・操作
- 赤 #FF0000 → 青 #0000FF / 90度 / 線形
- 得られる結果
- 左から右に変化する sRGB グラデーション
CSSの90度は右向きです。途中の色位置を動かすと、各色が占める範囲が変わります。
PNGとCSSでは何が違いますか？
PNGは固定サイズの画像、CSSは表示領域に応じて描画します。PNGにはコピーしたCSSのような編集用の色位置情報は残りません。
グラデーション作成
色と位置、角度を選び、線形・円形グラデーションの CSS を作成します。
開始色
終了色
1200 × 600 px・透明度を保持。CSS と同じ sRGB 補間、中心基準です。縦横比を変えるとグラデーションの位置関係も変わります。
background: linear-gradient(90deg in srgb, #F4D7DA 0%, #789B82 100%);
使い方
- 色とカラーストップを調整します。
- 線形か円形を選びます。
- プレビューを確認して CSS をコピーします。
結果の見方・対応範囲
ブラウザで使える CSS を生成します。透明度や背景の影響も確認してください。
計算方法とデータの出典