ホーム(記事一覧)へ

CSSでグラデーションの斜めの角度を指定する方法

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

単色と違いグラデーションには方向ができます。そしてこの方向を変えるために角度の指定をしたいものです。

CSSでグラデーションの斜めの角度を指定する方法を解説します。

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

background: linear-gradient(角度,開始の色,終わりの色)

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

下記は具体例です。

background: linear-gradient(45deg, yellow, red)
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時の方向になります。

0度

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

30度

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

60度

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

90度

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

120度

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

150度

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

180度(指定なし)

background: linear-gradient(yellow, red)

15度

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

45度

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

75度

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

105度

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

135度

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

165度

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

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

toでの指定と角度での指定の違い

グラデーションの方向を指定するにはtoで指定する方法もあります。

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

toでの指定(左下から右上へ)

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

角度での指定(45度)

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

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

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

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

まとめ

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

background: linear-gradient(角度,開始の色,終わりの色)

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

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

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

以上、CSSでグラデーションの斜めの角度を指定する方法でした。

関連記事