Het allermooiste zet Mozilla dit gradiënt "gebeuren" op het scherm. De oude en gebrekkige browsers krijgen (zoals gewoonlijk) een degelijk doch oer-saai uiterlijk, en alle moderne browsers krijgen middels progressive enhancement de mogelijkheid om hun "kunsten te laten zien". De stylesheet behoort in de head-sectie van jouw pagina terecht te komen, en de html-code moet je in de body-sectie plaatsen.
<div class="gradient-menu-achtergrond">
<ul class="gradient-menu">
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">home</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">css</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">tekst</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">effects</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">horizontal</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">gradient</a></li>
<li><a href="http://kompoos.nl/css/text-effects/horizontal-gradient-menu.html">menu</a></li>
</ul>
</div>
<style type="text/css">
.gradient-menu-achtergrond{
padding:0.5em;
text-align:center;
color:inherit;
background:#ddd}
ul.gradient-menu{
padding:0;
margin:0 auto;
list-style:none;
display:inline-block;
font-size:90%;
height:3.5em;
border-radius:10px;
-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.3);
-moz-box-shadow:0px 0px 6px rgba(255,255,255,0.3);
-o-box-shadow:0px 0px 6px rgba(255,255,255,0.3);
box-shadow:0px 0px 6px rgba(255,255,255,0.3)}
ul.gradient-menu{*display:inline}
ul.gradient-menu li{display:inline}
ul.gradient-menu li:first-child a{
-moz-border-radius:12px 0 0 12px;
border-radius:12px 0 0 12px;
-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px}
ul.gradient-menu li:last-child a{
-moz-border-radius:0 12px 12px 0;
-webkit-border-radius:0 12px 12px 0;
border-radius:0 12px 12px 0;
-webkit-border-top-right-radius:12px;
-webkit-border-bottom-right-radius:12px;
-webkit-appearance:none}
ul li a{
color:inherit;
background:#042;
border:1px solid #00542A}
ul.gradient-menu li a{
display:block;
padding:0 25px;
height:3em;
line-height:3.2em;
text-decoration:none;
color:#fff;
float:left;
margin-right:-1px;
text-align:center;
height:3.5em;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAYAAAAVdY8wAAAAK0lEQVQ4jWP8//9/HAMRgIWBgeHfwCn8Q3WFA2j1yPTMqBupo3BYuZG6CgGUAyBzH+1NtQAAAABJRU5ErkJggg==') ;
background-repeat:repeat-x;
background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.5,transparent),to(rgba(255,255,255,0.3)));
background-image:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%, transparent 50%,rgba(255,255,255,0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%, transparent 50%,rgba(255,255,255,0.3) 100%);
background-image:linear-gradient(top, rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%, transparent 50%,rgba(255,255,255,0.3) 100%);
-webkit-box-shadow:inset -1px 0 1px rgba(255,255,255,0.4),inset 1px 0 1px rgba(255,255,255,0.4),inset 0 0 10px rgba(255,255,255,0.4);
-moz-box-shadow:inset -1px 0 1px rgba(255,255,255,0.4),inset 1px 0 1px rgba(255,255,255,0.4),inset 0 0 10px rgba(255,255,255,0.4);
box-shadow: inset -1px 0 1px rgba(255,255,255,0.4),inset 1px 0 1px rgba(255,255,255,0.4),inset 0 0 10px rgba(255,255,255,0.4);
text-shadow: 1px -1px 1px #000;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
transition: 0.1s}
ul.gradient-menu li a:hover{
line-height:3.8em;
background-image:-webkit-gradient(linear,00,0 100%,color-stop(0,rgba(255,255,255,0.2)),color-stop(0.5,rgba(255,255,255,0)),color-stop(0.5,transparent),to(rgba(255,255,255,0.2)));
background-image:-moz-linear-gradient(top,rgba(255,255,255,0.2) 0,rgba(255,255,255,0) 50%,transparent 50%,rgba(255,255,255,0.2) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,0.2) 0,rgba(255,255,255,0) 50%,transparent 50%,rgba(255,255, 255,0.2) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,0.2) 0,rgba(255,255,255,0) 50%,transparent 50%,rgba(255,255,255,0.2) 100%);
background-image:linear-gradient(top,rgba(255,255,255,0.2) 0,rgba(255,255,255,0) 50%,transparent 50%,rgba(255,255,255,0.2) 100%);
-webkit-box-shadow:inset -1px 0 1px rgba(0,0,0,0.4),inset 1px 0 1px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.4);
-moz-box-shadow:inset -1px 0 1px rgba(0,0,0,0.4),inset 1px 0 1px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.4);
box-shadow:inset -1px 0 1px rgba(0,0,0,0.4),inset 1px 0 1px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.4)}
ul li a:active{
background-color:#021}
ul.gradient-menu li a:active{
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.8);
-moz-box-shadow:inset 0 3px 5px rgba(0,0,0,0.8);
box-shadow:inset 0 3px 5px rgba(0,0,0,0.8)}
</style>