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