線形グラデーション Linear gradient

線形グラデーションについて

グラデーションはbackgroundまたはbackground-imageプロパティにlinear-gradient関数を設定します。
開始位置と終了位置は省略することができ、省略した場合、開始位置は0、終了位置は100%が初期値として設定されます。

なお、旧Webkit仕様では、from関数は開始位置を0、to関数は終了位置を1という仕様になっています。
開始と終了位置を指定したい場合はcolor-stop関数を使用します。

構文

位置の省略

							background:linear-gradient(方向または角度, 開始位置, 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, from(開始色), to(終了色));

位置の指定あり

							background:linear-gradient(方向または角度, 開始色 開始位置, 終了色 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, color-stop(開始位置, 開始色), color-stop(終了位置, 終了色));
方向
名称 設定値 設定値（toなし） 設定値 旧webkit仕様
上→下 to bottom top 開始方向：left top
終了方向：left bottom
下→上 to top bottom 開始方向：left bottom
終了方向：left top
左→右 to right left 開始方向：left top
終了方向：right top
右→左 to left right 開始方向：right top
終了方向：left top
左上→右下 to right bottom left top 開始方向：left top
終了方向：right bottom
右上→左下 to left bottom right bottom 開始方向：right top
終了方向：left bottom

角度

角度の指定は単位をdegとして指定します。
角度はxの左側を0とし、反時計回りを正、時計回りを負として指定することができます。

サンプル

縦方向

横方向

斜め

角度（60度）

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 縦方向 */
div.sample {
    background:-webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background:-webkit-linear-gradient(top, #f00, #00f);
    background:-moz-linear-gradient(top, #f00, #00f);
    background:-o-linear-gradient(top, #f00, #00f);
    background:linear-gradient(#f00, #00f);
 
/* 横方向 */
div.sample {
    background:-webkit-gradient(linear, left top, right top, from(#f00), to(#00f));
    background:-webkit-linear-gradient(left, #f00, #00f);
    background:-moz-linear-gradient(left, #f00, #00f);
    background:-o-linear-gradient(left, #f00, #00f);
    background:linear-gradient(to right, #f00, #00f);
}
 
/* 斜め方向 */
div.sample {
    background:-webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
    background:-webkit-linear-gradient(left top, #f00, #00f);
    background:-moz-linear-gradient(left top, #f00, #00f);
    background:-o-linear-gradient(left top, #f00, #00f);
    background:linear-gradient(to right bottom, #f00, #00f);
}
 
/* 角度指定 */
div.sample {
    background:-webkit-linear-gradient(60deg, #f00, #00f);
    background:-moz-linear-gradient(60deg, #f00, #00f);
    background:-o-linear-gradient(60deg, #f00, #00f);
    background:linear-gradient(60deg, #f00, #00f);
}

.sample {
    background:-webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background:-webkit-linear-gradient(top, #f00, #00f);
    background:-moz-linear-gradient(top, #f00, #00f);
    background:-o-linear-gradient(top, #f00, #00f);
    background:linear-gradient(#f00, #00f);
}

グラデーションポイントの追加

グラデーションの途中にポイントを追加して色を挿入することができます。
旧Webkit仕様ではcolor-stop関数を使用します。 位置を省略した場合は、均等に配置されます（ただし、旧Webkit仕様でcolor-stop関数を使用している場合は、省略することができません）。

サンプルコードでは旧Webkit仕様は色の開始と終了位置にもcolor-stop関数を使用していますが、色の開始と終了位置については、from関数とto関数でも可能です。

構文

							background:linear-gradient(方向, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, color-stop(開始位置, 開始色), color-stop(途中位置, 途中色), color-stop(終了位置, 終了色));

サンプル

縦方向

横方向

斜め

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 縦方向 位置指定なし */
div.sample {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
    background:-webkit-linear-gradient(top, #f00, #0f0, #00f);
    background:-moz-linear-gradient(top, #f00, #0f0, #00f);
    background:-o-linear-gradient(top, #f00, #0f0, #00f);
    background:linear-gradient(to bottom, #f00, #0f0, #00f);
}
 
/* 縦方向 位置指定あり */
div.sample {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
    background:-webkit-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
    background:-moz-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
    background:-o-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
    background:linear-gradient(to bottom, #f00 0, #0f0 50%, #00f 100%);
}
 
/* 斜め方向 位置指定あり */
div.sample {
    background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
    background:-webkit-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
    background:-moz-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
    background:-o-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
    background:linear-gradient(to right bottom, #f00 0, #0f0 50%, #00f 100%);
}

グラデーションの複数指定

Multiple backgroundsとしての指定ですが、カンマ区切りで指定することで、複数のグラデーションを1つの要素で使用することができます。

 

CSS

1
2
3
4
5
6
7
div.sample {
    background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, #f00, #00f);
    background:-moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), -moz-linear-gradient(top, #f00, #00f);
    background:-o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), -o-linear-gradient(top, #f00, #00f);
    background:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), linear-gradient(to bottom, #f00, #00f);
}

CSS3逆引きリファレンス一覧へ戻る