Transparent Image Drop Shadows

  • follow us in feedly
Published March 14, 2013 by Brad Knutson
CSS3 Drop Shadow

As a web designer, you’ve probably come across a situation where you have a transparent png that you want to apply a drop shadow to. It would be easy enough to do this with Photoshop, but haven’t you ever wondered if there was a way to do this with CSS?

The CSS property box-shadow applies a shadow to the outline of the container element. We can use border-radius to modify the shape of the container and shadow slightly, but we can’t outline images with transparent backgrounds. What if there was a way to do this with CSS?

Actually…there is. It’s not widely supported yet – in fact it’s currently only supported by one browser.

Browser Support

Note: The only version of Safari that I’ve found to work is mobile Safari.

CSS

.css3-filter-dropshadow {
	-webkit-filter: drop-shadow(4px 4px 4px black);
	-moz-filter: drop-shadow(4px 4px 4px black);
	-ms-filter: drop-shadow(4px 4px 4px black);
	-o-filter: drop-shadow(4px 4px 4px black);
	filter: drop-shadow(4px 4px 4px black);
}

Examples

If you’re not checking this page out in the latest version of Google Chrome or Mobile Safari, you’re missing out on the awesomeness.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">