Playing with CSS3 gradients

No images were harmed in the making of this page. All elements below are built on pure CSS3 magic (and a bit of JS for the progress bars), no images have been used.

This page is visible only on Chrome, Safari, Android and iPhone/iPod touch.


Let's start with something simple: just one gradient, border-radius, text-shadow and box-shadow.

Grey Boxview code

.button1 {
	padding:4px 7px;
	font-size:12px;
	color:#444;
	background-color:#eee;
	background-image:-webkit-gradient(linear, 0 0, 0 100%,
		color-stop(0, #fff),
		color-stop(0.05, #eee),
		color-stop(1, #bbb));
	text-shadow:0 1px 0 #f6f6f6;
	-webkit-border-radius:2px;
	border:1px solid #888;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);
}

Black Buttonview code

.button2 {
	height:22px;
	font-size:10px;
	background-color:#444;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#303030));
	-webkit-border-radius:11px;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.button2 a {
	padding:0 18px;
	line-height:20px;
	height:20px;
	color:#ccc;
	border-width:1px;
	border-style:solid;
	border-color:rgba(255,255,255,0.15);
	-webkit-border-radius:10px;
	text-shadow:0 -1px 0 #000;
}

Gradients may have as many color-stops as you want. Here an example with 4 color stops and a semi-transparent border.

Win7 RedWin7 Blueview code

.button3 {
	font-size:14px;
	background-color:#c93f27;
	background-image:-webkit-gradient(linear, 0 0, 0 100%,
		color-stop(0, #ec9f95),
		color-stop(0.5, #c93f27),
		color-stop(0.5, #af301f),
		color-stop(1, #f87036));
	-webkit-border-radius:3px;
	border:1px solid #af3c2c;
	-webkit-box-shadow:0 2px 4px rgba(248,112,54,0.7);
}

.button3 a {
	padding:5px 10px;
	color:#fff;
	text-shadow:0 0 3px #ff8d5c;
	-webkit-border-radius:2px;
	border:2px solid rgba(255,255,255,0.25);
}

You can also mix linear with radial gradients. It's a pity the radial one has no anti-aliasing.

Glossyview code

.button7 {
	font-size:12px;
	text-align:center;
	background-image:
		-webkit-gradient(radial, 50% -186, 0, 50% -186, 400,
			color-stop(0, rgba(255,255,255,0.3)),
			color-stop(0.5, rgba(255,255,255,0.3)),
			color-stop(0.5, rgba(255,255,255,0))),
		-webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#777));
	-webkit-border-radius:4px;
	border:1px solid #555;
	-webkit-box-shadow:0 1px 0 #fff;
}

.button7 a {
	width:76px;
	height:22px;
	line-height:22px;
	color:#eee;	
	text-shadow:0 0 3px #222;
	-webkit-border-radius:4px;
	border:2px solid rgba(255,255,255,0.15);
}

Mixing two radial gradients we get a nice gem effect.

Gem GreenGem Orangeview code

.button5 {
	width:14px;
	height:14px;
	text-indent:-9999em;
	background-image:
		-webkit-gradient(radial, 7 2, 0, 7 2, 3,
			from(rgba(255,255,255,0.85)),
			to(rgba(255,255,255,0))),
		-webkit-gradient(radial, 7 12, 0, 7 7, 14,
			from(#c7f08b),
			to(#006013));
	-webkit-border-radius:7px;
	border:1px solid #48762c;
	-webkit-box-shadow:0 1px 0 #fff;
}

And now the fun part. We can also use a gradient as a mask. This opens an infinite range of possibilities. Have a look a the following scrollbars. They are mode of a couple of gradients and a gradient mask. As we have control over XY position of the mask we can create some fancy effects. Again: no images, just CSS.

Progress barview code

Barber shop

.button8 {
	width:200px;
	height:15px;
	border-width:0 1px 1px 1px;
	border-style:solid;
	border-color:#a6a6a6 #bfbfbf #a6a6a6 #bfbfbf;
	background-image:
		-webkit-gradient(linear, 0 0, 0 100%,
			color-stop(0, rgba(255,255,255,0)),
			color-stop(0.15, rgba(255,255,255,0.6)),
			color-stop(0.5, rgba(255,255,255,0))),
		-webkit-gradient(linear, 0 0, 0 100%,
			color-stop(0, #a6a6a6),
			color-stop(0.1, #b6b6b6),
			color-stop(0.9, #f8f8f8),
			color-stop(1, #aaa));
	-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.15);
	overflow:hidden;
}

.button8 span {
	width:90px;
	height:15px;
	background-image:
		-webkit-gradient(linear, 0 0, 0 100%,
			color-stop(0, rgba(255,255,255,0)),
			color-stop(0.15, rgba(255,255,255,0.55)),
			color-stop(0.5, rgba(255,255,255,0))),
		-webkit-gradient(linear, 0 0, 0 100%,
			color-stop(0, #204db5),
			color-stop(0.1, #0251ae),
			color-stop(0.9, #6fc1ff),
			color-stop(1, #569ce1));
	-webkit-mask-image:
		-webkit-gradient(linear, 0 0, 100% 0,
			color-stop(0.1, rgba(187,226,255,1)),
			color-stop(0.45, rgba(187,226,255,0.74)),
			color-stop(0.55, rgba(187,226,255,0.74)),
			color-stop(0.9, rgba(187,226,255,1)));
	-webkit-mask-repeat:repeat-x;
	-webkit-mask-size:18px 15px;
	-webkit-mask-position-x:0;
	text-indent:-9999em;
}

An extremely complex array of radial gradients. (Doesn't work on Android).

Burnview code

.button10 {
	padding:1px;
	-webkit-border-radius:28px;
	background:#522718;
	-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4);
}
.button10 a {
	width:56px;
	height:56px;
	text-indent:-9999em;
	background-image:
		-webkit-gradient(radial, 28 30, 0, 28 30, 32,
			color-stop(0, rgba(255,255,255,0)),
			color-stop(0.79, rgba(255,255,255,0)),
			color-stop(0.97, rgba(255,255,255,0.9)),
			color-stop(0.97, rgba(255,255,255,0))),
		-webkit-gradient(radial, 28 32, 0, 28 36, 32,
			from(rgba(255,255,255,0.5)),
			to(rgba(255,255,255,0))),
		-webkit-gradient(radial, 28 28, 0, -22 0, 28,
			from(rgba(30,30,30,1)),
			to(rgba(30,30,30,1))),
		-webkit-gradient(radial, 28 28, 0, 78 0, 28,
			from(rgba(30,30,30,1)),
			to(rgba(30,30,30,1))),
		-webkit-gradient(radial, 28 28, 0, 28 78, 28,
			from(rgba(30,30,30,1)),
			to(rgba(30,30,30,1))),
		-webkit-gradient(radial, 50% 100%, 0, 50% 50%, 30,
			color-stop(0.5, #ffdb5f), color-stop(1, #f37d26));
	-webkit-border-radius:28px;
}

Read related article on cubiq.org.