How to accomplish the following emboss effect with css - css

Question

Is it possible to have the same effect that this image has with pure CSS? It doesn't have to be a perfect match, but something that is close enough so I don't have to depend on such images...
thanks. It looks like the lightness of the gradient angles cut in towards the edges...and the same light gradient drops down a couple pixels from the top...

Answer 1

With no css gradients, here's something that's embossed, but not the bevel in your example:
<div style="background:#1d1d88;width:200px;height:50px;border-radius:10px;box-shadow: inset 0px -5px 20px 8px #060618;"></div>
It works best with a little border radius. If you want to add a gradient, I recommend http://www.colorzilla.com/gradient-editor/
Here's a quick class with a gradient:
.bevelish {
width: 200px;
height: 50px;
box-shadow: inset 0px -5px 30px 3px #000052;
background: #2f2e59;
background: -moz-linear-gradient(top, #2f2e59 40%, #00003d 60%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#2f2e59), color-stop(60%,#00003d));
background: -webkit-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: -o-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: -ms-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: linear-gradient(to bottom, #2f2e59 40%,#00003d 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2e59', endColorstr='#00003d',GradientType=0 );
}
The key is the inset in the box-shadow, and there's also I believe a 5th parameter you can add, a pixel value, for strength of the shadow, so you can play with the values and try to approach something beveled, but I'm not sure you can make it a "sharp" bevel.