背景
linear-gradient()
linear-gradient() は、2 つ以上の色が直線に沿って移り変わるグラデーション画像を作る関数です。background や background-image など、画像を受け取るプロパティに指定します。
構文linear-gradient( …
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> <length-percentage>{0,2}
<linear-color-hint> = <length-percentage>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7 0%,
#77a7d7,
#eaac3a 100%
);
}コントロール
linear-gradient()
repeating-
direction135deg
color-stop-list
マーカーをドラッグして位置を動かせます
#88d1c7 0%
色
位置
2 つ目の位置
#77a7d7
カラーヒント（前の色との中間点）
色
位置
#eaac3a 100%
カラーヒント（前の色との中間点）
色
位置
2 つ目の位置
解説
方向
- 角度は
0degが「下から上」で、時計回りに増えます。90degはto right、180degはto bottomと同じです。 - 方向を省略すると
to bottom（180deg）になります。 to top rightのような角の指定は、要素の縦横比によって実際の角度が変わります。プレビューの右下をドラッグして形を変えると違いがわかります。
色の位置
- 位置を省略した色は、前後の位置が決まっている色のあいだに均等に並びます。最初の色は
0%、最後の色は100%とみなされます。 red 20% 40%のように位置を 2 つ書くと、その区間がべた塗りになります。- 前の色より小さい位置を指定すると前の位置にそろえられ、境目がくっきりした縞模様になります。
カラーヒント
2 つの色の間に位置だけを書くと（red, 20%, blue）、その位置がちょうど中間色になるように色の変化の速さが偏ります。
repeating-linear-gradient()
最初の色から最後の色までの区間を、要素全体に繰り返し敷き詰めます。最後の色に px や小さい % の位置を指定したときに効果が出ます。