CSS3　グラデーション

グラデーションの基本

基本（線形）

<div class="demo gradation">線形</div>

1	<div class="demo gradation">線形</div>

.demo {
	width:90%;
	height:200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	padding-top: 20px;
	padding-left: 20px;
	background-color: #CCC;
	color: #FFF;
}

.demo {

width:90%;

height:200px;

margin-top: 40px;

margin-right: auto;

margin-bottom: 40px;

margin-left: auto;

padding-top: 20px;

padding-left: 20px;

background-color: #CCC;

color: #FFF;

}

.gradation {
	background: linear-gradient(to bottom, #666, #000, #666);
	background: -moz-linear-gradient(top, #666, #000, #666);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
}

.gradation {

background: linear-gradient(to bottom, #666, #000, #666);

background: -moz-linear-gradient(top, #666, #000, #666);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));

}

グラデーションの種類 (線形、linear)

mozilla系ブラウザ

background: -moz-linear-gradient(top, #666, #000, #666);　
webkit 系ブラウザ

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));

グラデーションの方向（共通）

background: linear-gradient(to bottom, #666, #000, #666);

to top　下から上へグラデーション
to bottom　上から下へ
to left　右から左へ
to right　左から右へ
to right bottom 　左上から右下へ

グラデーションの方向（mozilla系とwebkit系ブラウザ）

mozilla系ブラウザ

background: -moz-linear-gradient(top, #666, #000, #666);　
top　上から下
bottom　下から上
left　左から右
right　右から左
top -45deg　左上から右下
webkit系ブラウザ

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
left top, left bottom　上から下
left bottom, left top　下から上
left top, right bottom　左から右
right top, left bottom　右から左
left top, right bottom　左上から右下

開始の色から終了の色

mozilla系ブラウザ

background: -moz-linear-gradient(top, #666, #000, #666);　
開始　#666 → #000 → #666　終了

%を使って色の領域を指定することもできます。
開始　#666 0% → #000 30% → #666　終了
webkit 系ブラウザ

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
開始　color-stop(0, #666) → color-stop(0.5, #000) → color-stop(1.0, #666)　終了

開始色from（色のみ） → color-stop(0.5, #000)　→ ,終了色to（色のみ）でもOK
開始　from(#666) → color-stop(0.5, #000) → to(#666)　終了

色はRGBaで指定することもできますが、とりあえず基本はこれで十分だと思います。

グラデーションの種類 (円形、radial)

background: radial-gradient(#F00, #fff 33%, #000);

円形

アクアブルー

.gradation2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
	background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}

.gradation2 {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));

background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

}

クリスタルレッド

.gradation3 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #ff6600), color-stop(0.52, #ea2804), color-stop(0.50, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.00, #f1b9b0));
	background: -webkit-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
	background: -moz-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
	background: -o-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
	background: -ms-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
	background: linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
}

.gradation3 {

background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #ff6600), color-stop(0.52, #ea2804), color-stop(0.50, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.00, #f1b9b0));

background: -webkit-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);

background: -moz-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);

background: -o-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);

background: -ms-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);

background: linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);

}

シンプルホワイト

.gradation4 {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 ); /* IE6-9 */
}

.gradation4 {

background: #ffffff; /* Old browsers */

background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* IE10+ */

background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 ); /* IE6-9 */

}

レインボー

.gradation5 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00));
	background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
}

.gradation5 {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00));

background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);

background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);

background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);

background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);

background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);

}

グラデーションが簡単に作れるサービス

上のグラデーションをコピペしたサイトですが、作業時間の短縮になるのでこういうサービスは利用したほうがよいと思います。
https://grad3.ecoloniq.jp/
https://www.colorzilla.com/gradient-editor/
グラデーション以外にもいろいろなことができる、まさしくCSS3メーカーです。
https://css3maker.com/