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

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