One-Sided Box Shadow

Shows how to apply a one-sided box-shadow so that the shadow overlaps all content inside the element. Applying box-shadow directly to the element does not necessarily affect its children.

by Travis Almand

HTML

<div class='container'>
    <div class='left'>
        <p>Box shadow is applied to right column.</p>
        <p>Div inside column overlaps shadow.</p>
    </div>
    <div class='right'><div></div></div>
</div>

<div class='container'>
    <div class='left'>
        <p>Box shadow is applied to right column's before pseudo-element.</p>
        <p>Shadow overlaps div inside column.</p>
    </div>
    <div class='right pseudo'>
        <div></div>
    </div>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container {
    border: 1px solid black;
    display: flex;
    height: 200px;
    margin: 20px auto;
    width: 75%;
}
.left, .right {
    display: inline-block;
    height: 100%;
}
.left {
    padding: 0 10px;
    width: 75%;
}
.right {
    box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.5);
    flex: 1;
}
.right div {
    background-color: gainsboro;
    height: 100px;
    padding: 10px;
}

.pseudo {
    box-shadow: none;
    overflow: hidden;
    position: relative;
}
.pseudo:before {
    bottom: 0;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.25);
    content: '';
    display: block;
    left: -1px;
    position: absolute;
    top: 0;
    width: 1px;
}