Used in casting shadows (often called “Drop Shadows”, like in Photoshop) from elements. Here is an example with the deepest possible browser support:

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ 
Avatar of Sara Cope
Sara Cope on (Updated on )

Top Shadow

Shadow along the top edge of the website, like this:

body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
Avatar of Chris Coyier
Chris Coyier on (Updated on )