Box inner shadow experiments

by dipish

HTML

<p>We use a combination of positive offset and negative spread to make shadow(s) appear only where we want them to</p>
<div class="box1">Shadow on one side</div>
<div class="box2"><div class="inner">Shadow on two sides. Uses a nested element</div></div>

CSS

body {
    margin: 50px;
}

p {
    margin: 20px 0;
}

.box1, .box2 {
    margin: 20px;
    width: 200px;
    height: 100px;
    padding: 20px;
    background: #FFFDEB;
}

.box1 {
    box-shadow: inset 0 6px 6px -6px #666;
}

.box2 {
    box-shadow: inset 0 6px 6px -6px #666;
    position: relative;
}

    .box2 > .inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        box-shadow: inset 0 -6px 6px -6px #666;
    }