How do you add a shadow underneath a header that is gray and blurry in CSS?

Question

I wanted to find out how to make a shadow underneath my header that is both gray and blurry. I have read a W3 Schools article about this but I want it to only be below my header and horizontal while making it blurry and gray.

#header {
  /*In This Line- CSS for Box Shadow*/
  position:fixed
  }

<header id="header">
My Header
<!-- Shadow -->
</header>

Answer 1

#header {
  /In This Line- CSS for Box Shadow/
  position:fixed;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }

<header id="header">
My Header
<!-- Shadow -->
</header>

Answer 2

Try this:

box-shadow: 0px 20px 40px 10px #aaa;