この記事のポイント
- 3色の位置を0％・50％・100％へ指定した
- 135度にすると左上から右下へ色が移る
- 生成コードは通常色とlinear-gradientの2行で使える
サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。
検証環境：2026年10月10日、WindowsのCodex内蔵Chromium。CSS Gradientを無料・未ログインで利用した。
背景の色を目分量で調整すると、途中色の位置や角度を比べにくい。今回は紺#0F172A、青#2563EB、水色#22D3EEの3色を、0％・50％・100％へ置き、角度を135度にした。
生成された本体はlinear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(37, 99, 235, 1) 50%, rgba(34, 211, 238, 1) 100%)である。色と位置を画面で変えるたびにプレビューへ反映される。
操作手順
- CSS Gradientを開き、Linearを選ぶ。
- 角度欄を135にする。
- 色の停止点を3つにし、0％・50％・100％へ移動する。
- 各停止点へ3つのカラーコードを入力する。
- 下部のCSSをコピーして、対象要素の
backgroundへ貼る。
先頭の通常色にも意味がある
生成コードにはbackground: #0F172A;という通常色が先に出る。グラデーションを解釈できない環境や、後続指定が読み込まれない場合の代替背景である。2行を同じ順序で書けば、対応環境では後ろのグラデーションが優先される。
中央の青を60％へ動かすと、紺から青までの区間が長くなり、水色への変化は短くなる。配色だけでなく停止位置を調整すると、文字を置く側だけ暗く保つ設計も作りやすい。
コメント