CSS3 Tip: Removing Box Shadows

Adding box shadows is a great way to bring depth and focus to your design. You have probably seen this trick before:

.selector {
	-webkit-box-shadow: 0 3px 5px #333;
	-moz-box-shadow: 0 3px 5px #333;
	box-shadow: 0 3px 5px #333;
	}

That CSS snippet will add a nice drop shadow to any matching selector. But what if you want to remove the box shadow from one or more of the matched elements? Easy, just declare none for any box-shadow property values:

.selector.noshadow {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

Depending on the cascade, you may need to strengthen the .selector with greater specificity. Here we disable the box-shadow from all elements classed with .noshadow. So something like this:

<div class="selector">This box has a shadow</div>
<div class="selector noshadow">This box has no shadow</div>
<div class="selector">This box has a shadow</div>

Update: prefix properties no longer needed

Browser support for box-shadow has matured. The browser-specific properties prefixed with -webkit- and -moz- no longer are required. Now we can add and remove box shadows like so:

.selector {
	box-shadow: 0 3px 5px #333; /* add box shadow */
	}
.selector {
	box-shadow: none; /* remove box shadow */
	}

Cheers people.

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.