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

Inset
Color
Shadow 0
Box Shadow

Presets

AllBootstrapColorfulDirectionalFluent UIInsetLayeredMaterial DesignPrimerTailwind CSSTrendyUI

Element Properties

Color

Box Shadow CSS

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

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);
  }
CSS

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