Box Shadow CSS

CSS box shadows meant to cast shadows from block level elements. The following code will be supported in all latest browsers (including IE9)

.shadowDiv {
  -moz-box-shadow: 8px 8px 8px #666;
  -webkit-box-shadow: 8px 8px 8px #666;
  box-shadow: 8px 8px 8px #666;
}
  1. Horizontal X-offset. Negative will move shadow to the left of the box.
  2. Vertical Y-offset. Negative will show above the box.
  3. Blur amount, with 0 it will be sharp.
  4. Shadow color.

The shadow will be inside the box, if we add parameter inset to the code.

CSS Box Shadow Sample

div box with shadow
div box with inner shadow
Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *