CSSで要素に線形のグラデーションを指定する方法/background:linear-gradient()の使い方

日に日に？　進化するCSS、そのひとつの収穫であるグラデーションは正直使いどころが難しいんですが、アイデア次第でページに一味違った雰囲気を与えてくれます。

背景を線形のグラデーションにする方法

コードは下記の通り。

色だけだとこうなります。

background:linear-gradient(grey,white)

方向を指定するとこうなります。

background:linear-gradient(to bottom,grey,white)
background:linear-gradient(to left,grey,white)

角度を指定するとこうなります。

background:linear-gradient(45deg,grey,white)
background:linear-gradient(225deg,grey,white)

※deg = degrees

3色以上にする場合

単純に色を増やせば色が増えます。

background:linear-gradient(grey,blue,white)

途中の色はパーセンテージを指定することで位置を調整することが可能です。

background:linear-gradient(grey,blue 30%,red 80%,white)

background:linear-gradient(grey,blue 40%,red 90%,white)

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27