Box Shadow Top Bottom

Applying box shadow to the top and bottom only is little tricky. As we know CSS box-shadow property can accept a comma separated list of shadows, so we can apply multiple shadows on an element.

Box Shadow Properties

Shadow 0
Box Shadow

Element Properties


Box Shadow CSS

box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3);

Element CSS

.element {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    color: #000;
    border-radius: 10px;
    box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3);

We can get top bottom box shadow only by applying two shadows on an element. This approach will give us more control over the amount of shadow in each direction.

You can played around and adjust the values of box-shadow property in our multiple box shadow generator to get more exiting results.

Box Shadow Examples