【CSS】グラデーション(linear-gradient)で角度,方向を指定して斜めにする方法

CSSではグラデーションを指定することができます。

単色と違いグラデーションには方向ができます。よって斜めのグラデーションにしたいこともあるでしょう。

グラデーション(linear-gradient)で角度,方向を指定して斜めにする方法を解説します。

角度指定と方向指定

グラデーションを斜めにするには「角度を指定する方法」と「方向を指定する方法」の2つがあります。

「角度を指定する方法」 は「45度」のように角度を数値で指定します。

「方向を指定する方法」 は「左下から右上」のように頂点同士を結んだ方向を指定します。

グラデーションの角度の指定

角度の単位はdegです。45度なら45degです。

下記は具体例です。

background: linear-gradient(45deg, yellow, red)

グラデーションを指定するCSSはbackground-imageです。backgroundだけでまとめて指定することも可能です。

background-colorではありませんので注意しましょう。

background-image: linear-gradient(45deg, yellow, red)

角度一覧

0度のときは下から上、つまり12時の方向です。ここから時計回りに回っていきます。

90度は左から右、3時の方向です。

角度を指定しない場合は180度、上から下、6時の方向になります。

向きを逆にしたいときは180度以降の数値を入れるか、マイナス値にするか、色の指定位置を逆にしましょう。

グラデーションの方向の指定

toのあとには「left right top bottom」を使って方向を指定します。

toの先にはゴール先を指定します。

「(左下から)右上へ」のときは「to right top」と指定します。

下記は具体例です。

background: linear-gradient(to right top, yellow, red)

頂点から頂点へ対角線上に変化します。

方向一覧

方向指定と角度指定の違い

方向指定と角度指定の違いを見比べてみましょう。

方向指定（左下から右上へ）

角度指定（45度）

左下から右上へ指定した場合、左下の頂点から右下の頂点、対角線の角度となります。

要素が正方形なら45度ですが、長方形なら45度にはなりませんね。

要素が横や縦に伸びる場合は方向指定か角度指定かどちらが適切か考えて指定しましょう。

まとめ

グラデーションの角度の指定

角度の単位はdeg。45度なら45deg。

0度は下から上、そこから時計回りに回り、90度は左から右。

角度を指定しないときは180度と同じ上から下となる。

グラデーションの方向の指定

toのあとには「left right top bottom」を使ってゴール先を指定する。

「(左下から)右上へ」のときは「to right top」と指定。

以上、CSSでグラデーション(linear-gradient)を斜めにする方法でした。