Search
Close this search box.
Search
Close this search box.

Drop Shadows

box shadow

Box shadow allows shadow effects on elements.

box-shadow: 3px 3px 5px #ccc;

This property takes several values:

  • The first value indicates the horizontal offset of the shadow. You can use a negative value to put the shadow to the left of your box.
  • The second value indicates the vertical offset. You can use a negative value to put the shadow above your box
  • The third value is the blur radius. The bigger the value, the more blurred it is.

The box-shadow property is working for Firefox, Safari/Chrome, Opera and IE9.

CSS box-shadow not working in IE9 inside tables with collapsing borders

Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.

Just add this below the drop-shadow property and you ‘re set.

border-collapse: separate;