How can I add a box-shadow on one side of an element?

Question

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shado

Answer 1

To get the clipped effect on up to two sides you can use pseudo elements with background gradients.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

will add a nice shadow-like effect to the left and right of the elements that normally make up a document.