linear-gradient で背景色のグラデーションと分割表示

背景を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);

【参照】linear-gradient() | MDN

背景色をはっきり分割させる

グラデーションではなく、はっきりと背景色を分割させたい場合は分けたい「色 位置」の部分を設定します。

background: linear-gradient(90deg, green 0%, green 50%, blue 50%, blue 100%);

0%がグリーン、50%もグリーンにすればグラデーションにはなりません。50%〜100%も同様です。px単位も使用できますが、%指定にしておけばレスポンシブ対応にできます。

カテゴリー : HTML-CSS

TOPへ