Creating an inset dark drop shadow effect with CSS

Question

I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:

_{(source: gyazo.com)}

Does any body know how I can get that effect with CSS?

Answer 1

The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.

Notice the form of box-shadow is "x-offset, y-offset, blur, color"

Learn to use the blur amounts and multiple shadows and you can make some really nice effects.

Example style (for display on a background of #222):

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Answer 2

The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:

http://jsfiddle.net/L6nJj/

The important part is box-shadow: inset 2px 2px 3px 0 red.

For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values

Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow

Answer 3

Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.