CSS3

CSS関数

linear-gradient()

[Edge]○。●、mdn

¶直線グラデーション。

<angle> ○

グラデーションの角度。

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(0deg, red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(20deg, red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(90deg, red, yellow);
">あ</DIV>

to <side-or-corner>

<side-or-corner>＝[left | right] || [top | bottom]

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(to top, red,yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(to top left, red,yellow);
">あ</DIV>

<color-stop-list>

＝<linear-color-stop> , [ [<linear-color-hint>,]? <linear-color-stop> ]#

<linear-color-stop>

＝<color> && <length-percentage>?

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red 20px, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red, yellow 20px);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red 20px, yellow 20px);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red 20px, yellow 40px);
">あ</DIV>

最初の<length-percentage>まで赤、
次の<length-percentage>まで黄色？

<linear-color-hint>

＝<length-percentage>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red, 20px, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:linear-gradient(red, 80px, yellow);
">あ</DIV>

関連

linear-gradient()、conic-gradient()、radial-gradient()。

repeating-linear-gradient()、repeating-conic-gradient()、repeating-radial-gradient()。

テスト