How to make the bottom box shadow stretch across the whole header

by

I recently found out how to have the box shadow show up on only one side of an element, however, it doesn’t go the full length of the element, and stops a bit short of the edge of the screen on both sides as shown in the code snippet and image below. Does anyone have a fix to this/is it even possible to make it stretch the whole way across? All help is appreciated.

Example Image

header {
    box-shadow: 0 5px 7.5px -7.5px gray;
}
<header>Header Shadow Example</header>

6 thoughts on “How to make the bottom box shadow stretch across the whole header”

  1. Box-shadow creates the effect on the element itself — since you have margin from the body, you can use a psuedo:after element with negative left and right values to cover that distance.

    header { position:relative; }
header:after {
  position: absolute;
  left: -15px;
  right: -15px;
  top: 0;
  bottom: 0;
  content: "";
  box-shadow: 0 5px 7.5px -7.5px grey;
}
    Reply

Leave a Comment