Question

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/.

Answer 1

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/