Use this page to see the differences in various box-shadow declarations across browsers.
Select which browsers to display:
| Firefox 3.6 | Firefox 4.0 | Internet Explorer 9 |
Chrome 10 | Safari 5 | Opera 11.10 | Android 2.2 | iOS 4.2 | Opera Mobile 11 |
Your browser |
|
|---|---|---|---|---|---|---|---|---|---|---|
box-shadow: 0 0 4px #000;Common dropshadow with a modest blur, and nothing else. |
||||||||||
box-shadow: 0 0 4px 4px #000;Common dropshadow with increased spread. Shadow layer should appear bigger. |
||||||||||
box-shadow: 4px 4px 4px #000;Equal blur and positions. Shadow should be top-left aligned with the box. |
||||||||||
box-shadow: 4px 4px 4px -2px #000;Negative spread factor. Shadow layer should appear smaller. |
||||||||||
box-shadow: 4px 4px 4px 4px #000;Equal positions, blur, and spread. Shadow should be top-left aligned with the box, but still be visible on all sides. |
||||||||||
box-shadow: inset 0 0 4px #000;Inset shadow. Makes a shadow appear on the inside of the box, rather than on the outside. |
||||||||||
box-shadow: inset 0 0 4px -2px #000;Inset shadow with negative spread factor. Shadow layer should appear bigger, causing less of it to remain visible. |
||||||||||
box-shadow: inset 4px 4px 4px #000;Equal blur and positions on inset shadow. Shadow should be bottom-right aligned inside the box. |
||||||||||
box-shadow: 4px 4px 0 #000;No blur. Should make a shadow with sharp edge. |
||||||||||
box-shadow: 0 0 0 4px #000;No blur and no position. Shadow should appear like a border. |
||||||||||
box-shadow: 4px 4px 4px #f00,Multiple shadows. |
||||||||||
box-shadow: 0 0 4px #f00,Multiple shadows and different spread factors. |
||||||||||
box-shadow: inset 4px 4px 4px #f00,Multiple inset shadows. |
||||||||||
box-shadow: inset 0 0 4px #000,Combining inset and outset shadows. |