CODEWITHSUNDEEP
htmlcss
user1096509
user1096509

Reputation: 741

drop shadow to spread full width of element

How do I get a drop shadow to spread the full width of an element. This is what I have right now but I'm it's falling short of spreading horizontally across the element.
As you can see at the right and left of the image the shadow is inset I need it to span the entire width. 

box-shadow: 0 8px 6px -6px black;

enter image description here

Upvotes: 2

Views: 9860

Answers (2)

John Crisp
John Crisp

Reputation: 54

Dont use the -6px have it at 0px, also dont forget about other browsers.

-webkit-box-shadow: 0 8px 6px 0 #000000;
-moz-box-shadow: 0 8px 6px 0 #000000;
box-shadow: 0 8px 6px 0 #000000;

Upvotes: 1

j08691
j08691

Reputation: 207901

Your negative spread-radius is causing that. Change the -6px to some positive value:

box-shadow: 0 8px 6px 6px black;

jsFiddle example

According to the MDN:

Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

Upvotes: 2

Related Questions