Photograph of a woman in candlelight by Isaac Sloan

CSS has been described as “the new PhotoShop”, due to the fact that an increasing number of visual effects that were previously the sole domain of bitmap editors are now achievable directly in stylesheets. Creating gradients and shadows in CSS reduces file size, improves rendering speed, and makes page content far easier to change and edit, and are now a vital part of every web designer’s arsenal.

Goals: Use shadows and gradients appropriately on web page elements.

Prerequisite: Introduction to CSS

Total practice time: 2 hours

Core Material

  1. Box Shadow
  2. “Lifted” Box Shadow
  3. drop-shadow filter
  4. Cross-browser drop-shadow filter
  5. Basic Linear Gradients
  6. Basic Circular Gradients

When You’re Done

Much more can be achieved with both shadows and gradients: shadows can be animated to create the effect of a developing Polaroid picture, or used to create simple image vignettes.

Photograph by Isaac Sloan, used with permission

Enjoy this piece? I invite you to follow me at to learn more.