CSS3 グラデーションは、指定した2つ以上の色の間のスムーズな変化を表示するものです。
以前は、この効果を得るためには画像を使用しなければなりませんでした。しかし、CSS3 グラデーションを使用することにより、 ダウンロード時間と帯域幅の使用量を減らすことができるようになります。さらに、グラデーションはブラウザによって生成されるため、 グラデーションを持つ要素は、ズーム時にも見映えが悪くなることはありません。
CSS3は、2 種類のグラデーションを定義します：
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
数字の後に続く -webkit-、-moz- または -o- は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
線形グラデーションを作成するには、少なくとも 2 つのカラーストップを定義する必要があります。 カラーストップは、色と色の間のスムーズな変化を描画しようとする色です。 また、グラデーション効果を加える開始点と方向（または角度）も設定することができます。
background: linear-gradient(direction, color-stop1,
color-stop2, ...);
線形グラデーション - 上から下（デフォルト）へ
次の例は、上から始まる線形グラデーションを示しています。赤からスタートして黄色へ変化します：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
}
Try it Yourself ❯
線形グラデーション - 左から右へ
次の例は、左から始まる線形グラデーションを示しています。赤からスタートして黄色へ変化します：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
}
Try it Yourself ❯
線形グラデーション - 対角線
縦横両方の開始位置を指定することにより、斜めのグラデーションを作ることができます。
次の例は、左上から始まり右下に向かう線形グラデーションを示しています。赤からスタートして黄色へ変化します：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}
Try it Yourself ❯
グラデーションの方向をより詳細に制御したい場合は、定義済方向 （to bottom、to top、to right、to left、to bottom right など）の代わりに、 角度を定義することができます。
background: linear-gradient(angle, color-stop1,
color-stop2);
angle は、水平線とグラデーションラインの間の角度として指定します。
次の例は、線形グラデーションで角度を使用する方法を示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
}
Try it Yourself ❯
次の例は、複数のカラーストップを使用した線形グラデーション（上から下）を示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
}
Try it Yourself ❯
次の例は、虹色とテキストを持つ線形グラデーション（左から右へ）の作成方法を示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
Try it Yourself ❯
CSS3 グラデーションは、フェード効果の作成に使用することのできる透明度もサポートします。
透明度を追加するためには、カラーストップを定義する rgba() 関数を使用します。 rgba() 関数の最後のパラメータは、 0 から 1 までの値を取ることのできる色の透明度を定義します。 0 は完全に透明で、1 はフルカラー（不透明）を表します。
次の例は、左から始まる線形グラデーションを示しています。完全な透明から始まり、フルカラーの赤色へ変化します：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
}
Try it Yourself ❯
repeating-linear-gradient() 関数は、線形グラデーションを繰り返すために使用します：
線形グラデーションの繰り返し：
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Try it Yourself ❯
円形グラデーションは、その中心によって定義されます。
円形グラデーションを作成するには、少なくとも 2 つのカラーストップを定義する必要があります。
background: radial-gradient(shape size at position, start-color, ..., last-color);
デフォルトでは、形状は楕円形で、大きさは最も遠いコーナーで、位置は中央です。
円形グラデーション - 等間隔のカラーストップ（デフォルト）
次の例は、等間隔のカラーストップ持つ円形グラデーションを示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
}
Try it Yourself ❯
円形グラデーション - 間隔の異なるカラーストップ
次の例は、間隔の異なるカラーストップ持つ円形グラデーションを示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
}
Try it Yourself ❯
shape パラメータは、形状を定義するもので、circle または ellipse を指定することができます。 デフォルト値は ellipse です。
次の例は、真円の円形グラデーションを示しています：
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
}
Try it Yourself ❯
size パラメータは、グラデーションのサイズを定義し、4つの値を取ることができます：
いろいろな size キーワードを持つ円形グラデーション：
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Try it Yourself ❯
repeating-radial-gradient() 関数は、円形グラデーションを繰り返すために使用します：
円形グラデーションの繰り返し：
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
}
Try it Yourself ❯
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯ Exercise 6 ❯ Exercise 7 ❯