The first step is to create a gradient – I use Fireworks. Adjust the opacity to zero for the top side and 80% for the bottom.

Here’s an example of the CSS

.this_div {
height:50px;
width:100%;
background:url(trans.png) #990 bottom;
}

Here’s an example of the HTML

<div class="this_div"></div>

Here’s the final result.

Here’s the CSS for the output above:

 <style type="text/css">
.box {
position:relative;
background-color:#666;
height:75px;
width:400px;
overflow:hidden;
padding:10px;
}
.box h1 {
font-size:36px;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
}
.top {
color:#FFF;
position:absolute;
z-index:1;
}
.bottom {
position:absolute;
color:#333;
top:11px;
left:11px;
}
</style>

Here’s the HTML for the output above:

 <div class="box">
<div class="top"><h1>Here's My Test</h1></div>
<div class="bottom"><h1>Here's My Test</h1></div>
</div>

Hopefully you’ve found this quick tutorial valuable. Contact me if you have any questions or would do it a different way. There’s 1,001 ways to do everything – that’s why I love coding.