css - Simple two color gradient-like effect without image? -

i'd create simple visual effect display of rows of data on iphone/android/etc, seen in this example.

the effect simple; it's 2 rectangles on top of each other, top 1 lighter bottom 1 , lighter-yet border-top. it:

<style> .rowtop { background-color: #333; border-top: 1px solid #ccc; height: 25px; } .rowbottom { background-color: #000; height: 25px; } </style>  <div class="row">  <div class="rowtop">&nbsp;</div>  <div class="rowbottom">&nbsp;</div> </div> 

now i'd able place text , labels on top of this, again seen in the example. that's need help.

i'd place text relative "row", row made of 2 divs, it's complicated. text has live on top of "rowtop" , "rowbottom" divs.

i tried messing around third div labels , setting z-index couldn't wanted.

i think can use background image instead of rowtop , rowbottom , make easy on myself, wondering if has clever non-image based solution.

[update] based on edeverett's answer tried css gradients , worked great:

background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0))); 

if targeting mobile browsers should able effect using css gradients instead of background image.

as side note, think shouldn't making effect adding divs. should try keep content , presentation separate in case (or users) decide present differently in future. if css gradients don't work i'd recommend background image approach (look @ using data-uris if want 'fun' , reduce http requests).