CSS: create white glow around image

Question

How can I create a white glow as the border of an unknown size image?

Answer 1

Use simple CSS3 (not supported in IE<9)

img {     box-shadow: 0px 0px 5px #fff; } 

This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)

If you're worried about the users that don't have the latest versions of their browsers, use this:

img { -moz-box-shadow: 0 0 5px #fff; -webkit-box-shadow: 0 0 5px #fff; box-shadow: 0px 0px 5px #fff; } 

For IE you can use a glow filter (not sure which browsers support it)

img {     filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5); } 

Play with the settings to see what suits you :)

Answer 2

Works like a charm!

.imageClass {   -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); } 

Voila! That's it! Obviously this won't work in ie, but who cares...