CSS: create a white glow around the image

Question

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

Answer 1

Use plain CSS3 (not supported in IE and <9)

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

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

If you are worried about users who do not 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

@tamir; you cna do this using the css3 property.

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

check the script http://jsfiddle.net/XUC5q/1/ & amp; you can create here http://css3generator.com/

If you need it to work in older versions of IE, you can use CSS3 PIE to emulate shadow in these browsers, and you can use filter as Kyle said

 filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5') 

you can create your filter here http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Answer 3

It works like a charm!

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

Voila! It! Obviously this will not work, but who cares ...

Answer 4

Depending on your target browsers. The new ones are as simple as :

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

For older browsers, you need to implement workarounds, for example, in this example , but you will most likely need an extra charge.

Answer 5

late to the party here; however, just wanted to add a little extra fun.

 box-shadow: 0px 0px 5px rgba(0,0,0,.3); padding:7px; 

will give you a nice look. The gasket will give you a simulated white border (or any border that you set). rgba just allows you to do untidiness on a particular color; 0,0,0 - black. You can also easily use any other RGB color.

Hope this helps someone!

Answer 6

You can use CSS3 to create such an effect, but then you will only see it in modern browsers that support window shadow, unless you use polyfill like CSS3PIE . For example, you can do something like this: http://jsfiddle.net/cany2/