CSS menu with gradients

This post will show you how to create a navigation menu stylized with CSS gradients. So far we've always used background images to accomplish this task, but now with this brand new CSS3 feature such workarounds are no longer needed.

Here's the code for a simple menu made up of a standard unordered list:

#navigation {
	height: 3em;
	margin: 0;
	padding: 0 1em;
	background: #666;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	background: -moz-linear-gradient(top,  #666,  #333);
	list-style: none;
}

#navigation li {
	float: left;
	height: 100%;
	position: relative;
	margin-right: 0.5em;
}

#navigation a {
	height: 2em;
	position: relative;
	top: 1em;
	float: left;
	bottom: 0;
	padding: 0 1em;
	line-height: 2;
	font-weight: bold;
	text-decoration: none;
	background: #999;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#eeeeee');
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#eee));
	background: -moz-linear-gradient(top,  #999,  #eee);
	color: #444;
	border-radius: 8px 8px 0 0;
	border: 1px solid #ddd;
}

#navigation a:hover {
	background: #eee;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
	background: -moz-linear-gradient(top,  #eee,  #999);
	color: #666;
}

On hover, we simply invert the gradient's colors to create a rollover effect. You can see the demo below.

Demo

Live demo