Get the same shadow in all modern browsers (except IE version 9)


I've been trying to get the same shadow in all modern browsers (except IE version 9). Unfortunately, for example Google Chrome doesn't blur it as nice as Firefox does.

Here's my code..


<div id="box">Every browser should see my shadow the same way!</div>


#box {
    box-shadow: 0 4px 4px -4px #000, 4px 0 0 0 #E8EBEF;
    padding: 10px;
    background-color: #E8EBEF;
    width: 200px;

and here's a fiddle:

What can I do to get the same shadow in at least the latest versions of Firefox, Google Chrome, Safari and Opera? Thanks for your ideas!

Problem courtesy of: James Cazzetta


The different rendering engines draw the shadow slightly differently (Firefox for example has a smoother falloff than Webkit based browsers, looks better if you ask me)

The only way to guarantee it'll look identical across browsers is to be dumb about it and use images.

Otherwise you need to find a way to deal with the minor differences without adversely affecting your design.

Solution courtesy of: PhonicUK


You may try online CSS3 Generator or CSS3 Box Shadow Generator or CSS3 Maker

Discussion courtesy of: blasteralfred Ψ

This recipe can be found in it's original form on Stack Over Flow.