CSS3 Box Shadow Effect Online Debugging Tool

This is an online tool for debugging and previewing CSS3 Box Shadow effects. The right side provides real-time debugging and displays the preview, generating corresponding CSS3 code in real-time for convenient use.

Effect Settings

Shadow 1

Horizontal Offset:

Vertical Offset:

Blur Radius:

Shadow Color:

Add Border Radius Remove ShadowAdd Shadow

Preview Area

Code Section(Double-click to copy to clipboard)

-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333

Instructions

Supported in Safari 3.1+ Safari 3 Supported in Firefox 3.5+ Firefox 3.5 Supported in Opera 10.5+ Opera 10.5 Supported in Chrome Chrome Not supported in IE8 Internet Explorer

box-shadow: horizontal offset (positive/negative values); vertical offset (positive/negative values); blur radius; shadow color
Firefox supports Box Shadow: -moz-box-shadow:2px 2px 5px #333333
Safari and Chrome with webkit support Box Shadow: -webkit-box-shadow:2px 2px 5px #333333
Opera supports Box Shadow: box-shadow:2px 2px 5px #333333
IE does not support Box Shadow