Smoother & sharper shadows in CSS

Default box-shadow

.box {
 box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

Create smoother box-shadows by layering multiple

.shadow-5 {
 box-shadow:  0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

Shadows with decreasing alpha

.blog-shadow-sharp {
 box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
             0 2px 2px rgba(0,0,0,0.20), 
             0 4px 4px rgba(0,0,0,0.15), 
             0 8px 8px rgba(0,0,0,0.10),
             0 16px 16px rgba(0,0,0,0.05);

}