背景をCSSでグラデーション表示させたい、2色を分割して表示させたいというときに使えるのが background プロパティの linear-gradient です。
背景のグラデーション
CSSでグラデーション表示したい場合は background: linear-gradient(); を使用します。色が変化する方向角度、色と位置を指定してスタイルを設定します。
2色のグラデーション
CSS
background: linear-gradient(to right, green 0%, blue 100%);linear-gradient(色が変化する方向角度, 色 位置（グラデーション開始の色と位置）, 色 位置（終了の色と位置）)以下は上記コードを実装したものです。グリーンからブルーの2色のグラデーションです。
表示例
2色の色を0%〜100%で指定する場合数字を省略しても同様の表示になるので、以下のような記述でもOK。
CSS
background: linear-gradient(to right, green, blue);方向角度は以下のように指定します。方向角度を省略した場合、上から下にかけてのグラデーションになります。
- 【0deg】もしくは【to top】 ↑(下から上)
- 【90deg】もしくは【to right】 →(左から右)
- 【180deg】もしくは【to bottom】 ↓(上から下)
- 【270deg】もしくは【to left】 ←(右から左)
任意の角度を指定することができるので斜めのグラデーションもできます。
CSS
background: linear-gradient(135deg, green, blue);表示例
3色のグラデーション
色は3色以上でも設定できます。
CSS
background: linear-gradient(135deg, aqua, skyblue, blue);表示例
画像の上にグラデーションを重ねる
画像とグラデーションをミックスさせることもできます。
CSS
background: linear-gradient(90deg, rgb(255 41 211 / 20%), rgb(255 224 0 / 40%)) , url(../images/sampleimg.jpg);今回は画像の上に色を重ねます。後に記述した方が下に配置されるため、画像はグラデーションの後に記述します。
使用する画像はこちら。
linear-gradientを使ってグラデーションスタイルを当てたものがこちら。画像に色が重ねられました。
背景色をはっきり分割させる
グラデーションではなく、はっきりと背景色を分割させたい場合は分けたい「色 位置」の部分を設定します。
CSS
background: linear-gradient(90deg, green 0%, green 50%, blue 50%, blue 100%);表示例
0％がグリーン、50％もグリーンにすればグラデーションにはなりません。50％〜100％も同様です。px単位も使用できますが、％指定にしておけばレスポンシブ対応にできます。
カテゴリー : HTML-CSS
