Text-centered gradient box

by Exceeder

HTML

<div class="box1 color1 gradient1">
text
</div>

CSS

.box1 {
    width:10em; height:3em; color:white; text-align:center;
    margin:1em; box-shadow: 5px 5px 8px #888;
    line-height:2.7em;
}

.color1 {
    background-color:#44f;   
}

.color2 {
    background-color:#f44;   
}

.gradient1 {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);   
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);
    background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);
    border:#eee 1px solid;
}