Simple CSS box-shadow

Question

I'm attempting to recreate the shadow from the image below:

It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.

Here's my code:

box-shadow: inset 0 0 2px 0px #000000;

The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?

Answer 1

I've made the below fiddle from complete scratch, you can use it if you like it

Demo

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

.one {
    background: #B4B300;
    height: 100px;
}

.two {
    background: #FD370A;
    height: 100px;
    box-shadow: 0 0 5px #212121;
}

.three {
    background: #fff;
    height: 5px;
}

Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;

Note: I forgot to add -moz and -webkit prefixes so be sure you use them if you want to support the older browsers too.

Answer 2

http://jsfiddle.net/CQvBb/

<div class="first"></div>
<div class="second"></div>

.first {
    background:#B4B300;
    width:500px;
    height:100px;
    box-shadow: inset 0 -5px 5px -5px #000000;
    -moz-box-shadow: inset 0 -5px 5px -5px #000000;
    -webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
    background:#FD370A;
    width:500px;
    height:100px;
}