B2B Marketing Insights by Ironpaper

How to use CSS drop shadows for web designers

Written by Ironpaper | September 16, 2012

CSS box shadow is used in casting shadows off block-level elements like <DIVS>. Both CSS rounded corners and CSS drop shadows can make website updates and maintenance  a breeze compared to cutting out images and using background elements.

Hello this is a box shadow

The structure of the above element is:

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

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

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

The structure consists of:

  • horizontal offset: a positive number indicates that shadow will fall on the right of the box
  • vertical offset: a positive number indicates that the shadow will be below the box
  • blur radius: This optional attribute indicates how blurred the shadow will be
  • spread radius: Increase the size of your CSS shadow with a positive number for this attribute
  • Color: You can dictate the color of your shadow as well