Question

Is it possible to create both an outer shadow for a 3D effect and an inner inset glow? I have a div with a lime green background that’s on top of a blue div. So far, I have the following:

.greendiv{
   background:darkgreen;
   box-shadow: box-shadow: 10px -7px 15px darkgray;
   box-shadow: lightgreen 0px 0px 3px inset;
}

The actual colors are in #ffffff format. It seems that the second declaration cancels the first one. Is there a way around this?

Answer 1

You simply declare box-shadow once, and use both versions inside, separated with a comma:

http://www.w3.org/TR/css3-background/#the-box-shadow

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword.

So, for you:

.greendiv {
    background: darkgreen;
    box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}

See: http://jsfiddle.net/JzsAh/