CODEWITHSUNDEEP
htmlcss
KatieK
KatieK

Reputation: 13863

How to get single-side box-shadow to appear from edge-to-edge?

For an element with 100% width and box-shadow defined such that it appears on the bottom only, how can I make the shadow appear consistent along the entire width of the element?

Currently, the shadow fades out at both the left and right edges; the shadow is noticeably different there than at the middle. Example:

<style>
body { padding: 0; margin: 0; }
h1 { margin: 0; box-shadow: 0 10px 10px #009;}
</style>

<h1>Bacon</h1>

Or see http://jsfiddle.net/RxVbt/1/.

Upvotes: 1

Views: 180

Answers (5)

Savi
Savi

Reputation: 106

try this:

h1 { margin: 0; box-shadow: 0 2px 10px 8px #009;}

Example here

Upvotes: 0

Scott
Scott

Reputation: 21888

Add negative values for the end caps.

box-shadow: -5px -5px 10px 10px #009;

fiddle here

Upvotes: 0

EricTheBiking
EricTheBiking

Reputation: 71

I did this by changing the h1 to include

margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;

The negative margin pulls the shadow wide enough to appear the same all the way across. This is a bit crude and hackish, but it works.

Upvotes: 3

Levi Botelho
Levi Botelho

Reputation: 25234

Add a spread distance to counter the blur value. For a blur of 10px you need a spread of 5px (5px in each direction = 10px) For example:

 h1 { margin: 0; box-shadow: 0 5px 10px 5px #009;}

See http://jsfiddle.net/RxVbt/9/

Upvotes: 3

Joel
Joel

Reputation: 5470

try this: h1 { margin: 0; box-shadow: 0px 10px #009;}

Upvotes: 0

Related Questions