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>

Does this answer your question? [How to create a drop shadow only on one side of an element?](https://stackoverflow.com/questions/5460129/how-to-create-a-drop-shadow-only-on-one-side-of-an-element) — FluffyKitten, Aug 14 '20 at 03:13
Does this answer your question? [How can I add a box-shadow on one side of an element?](https://stackoverflow.com/questions/5115427/how-can-i-add-a-box-shadow-on-one-side-of-an-element) — Brayden W, Aug 14 '20 at 03:25
Your question is a little vague...sorta. Are you interested in text-shadow? #header {text-shadow: 2px 4px 10px #a9a9a9;} — Tyler Rafferty, Aug 14 '20 at 03:42

Bodda · Accepted Answer · 2020-08-14T03:25:22.980

2

#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>

edited Aug 14 '20 at 03:25

answered Aug 14 '20 at 03:20

Bodda

65
1
2
6

Welcome to Stack Overflow. Your contributions are welcome, however when a question already has an answer on the site, then the correct action is to flag it as a duplicate so that the site doesn't get cluttered with redundant questions that have already been answered :) Please take a look at [the "Answered well-asked question" section of How do I write a good answer](https://stackoverflow.com/help/how-to-answer). Also for future reference, when you answer a (good) question, you should explain how your code answers it. For example, in this case, what does the double shadow do to fix the problem? – FluffyKitten Aug 14 '20 at 03:24

score 1 · Answer 2 · answered Aug 14 '20 at 03:15

1

Try this:

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

answered Aug 14 '20 at 03:15

Brayden W

130
1
10

Your contributions are welcome on Stack Overflow, however when a question already has an answer on the site, then the correct action is to flag it as a duplicate, so that the site doesn't get cluttered with redundant questions that have already been answered :) Please take a look at [the "Answered well-asked question" section of How do I write a good answer](https://stackoverflow.com/help/how-to-answer) for future reference. Note that answers to questions that are duplicates or off-topic can sometimes even get down-voted, even if they are good answers, because they don't meet the guidelines. – FluffyKitten Aug 14 '20 at 03:21

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

2 Answers2