CSS/グラデーション

①(to bottom, blue, #eee)

②(to top, #111, #888, #aaa, #eee)

③(to right, green, #eee)

④(to left, #111, #666, #aaa, #eee)

⑤(to bottom right, red, #eee)

⑥(to top left, purple, #eee)

⑦(-120deg, navy, #eee)

⑧(45deg, red, orange, yellow, green, blue, indigo, violet)

⑨(to left, #eee, #00ffff, #eee)

⑩(to left, #111, #ddd, #333)

⑪radial-gradient(#222, #eee)

⑫radial-gradient(#eee, #aaa, #555, #222)

⑬radial-gradient(darkgreen 1%, green 5% , #eee)

⑭repeating-linear-gradient(-45deg, #ccc, #ccc 5px, white 5px, white 10px)

⑮repeating-radial-gradient(#ccc, #ccc 5px, #eee 15px, #eee 10px)

CSS

.box {
	width: 150px;
	height: 150px;
	margin: 10px;
	display: inline-block;
	vertical-align: top;
}
#box {
	background: linear-gradient(to bottom, blue, #eee);
	color: #fff;
}

#box2 {
	background: -moz-linear-gradient(to top, #111, #888, #aaa, #eee);
	color: #222;
}

#box3 {
	background: -moz-linear-gradient(to right, green, #eee);
	color: #fff;
}

#box4 {
	background: -moz-linear-gradient(to left, #111, #666, #aaa, #eee);
	color: #222;
}

#box5 {
	background: -moz-linear-gradient(to bottom right, red, #eee);
	color: #fff;
}

#box6 {
	background: -moz-linear-gradient(to top left, purple, #eee);
	color: #222;
}

#box7 {
	background: -moz-linear-gradient(-120deg, navy, #eee);
	color: #eee;
}

#box8 {
	background: -moz-linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
	background: -webkit-gradient(linear, left top, right bottom, from(red), color-stop(0.2, orange), color-stop(0.3, yellow), color-stop(0.5, green), color-stop(0.7, blue), color-stop(0.8, indigo), to(violet));
	color: #111;
}

#box9 {
	background: -moz-linear-gradient(to left, #eee, #00ffff, #eee);
	color: #111;
}

#box10 {
	background: -moz-linear-gradient(to right, #111, #ddd, #333);
	color: #eee;
}

#box11 {
	background: radial-gradient(red, #eee);
	color: #222;
}

#box12 {
	background: radial-gradient(#eee, #aaa, #555, #222);
	color: #eee;
}

#box13 {
	background: radial-gradient(darkgreen 1%, green 5% , #eee);
	color: #222;
}

#box14 {
	color: #222;
	background: repeating-linear-gradient(-45deg, #ccc, #ccc 5px, white 5px, white 10px);
}

#box15 {
	color: #222;
	background: repeating-radial-gradient(#ccc, #ccc 5px, #eee 15px, #eee 10px)
}