88

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

Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49
tamir
  • 3,207
  • 2
  • 33
  • 51

6 Answers6

146

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 :)

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • I think this supports only IE 9+, just add:`` to render the page in IE9 and IE10 as version IE9 – Mark Aug 16 '13 at 01:46
  • 5
    Note that filter has unexpected behaviour in several elements. Apply it to a fieldset and be amazed. Also, it may leak to child elements. And it will show a ActiveX warning for the page with the dreaded yellow bar. Just avoid it. add a flat light grey shadow for IE and be done with. – gcb Oct 08 '13 at 21:35
  • Doesn't works with transparent images. Like a round png logo. – Santosh Kumar Dec 27 '16 at 13:26
  • @SantoshKumar, no it doesn't, because the box-shadow can't possibly know where the non-transparent pixels of a png are. It only affects HTML elements, the element itself, not the content. – Kyle Jan 06 '17 at 13:03
  • 2
    @Kyle drop-shadow can though :) – brandito Jul 06 '18 at 05:09
14

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...

mertyildiran
  • 6,477
  • 5
  • 32
  • 55
Hank
  • 1,658
  • 12
  • 13
  • 3
    Downvoted; -webkit-filter isn't a CSS property, and in any case would only support webkit browsers - you'd be better off also adding a non-prefixed version, and probably -moz-, -ms- and -o- prefixes, should mozilla, Microsoft or Opera (at whilst Opera 12 is still in circulation ...) – Algy Taylor Sep 02 '14 at 08:07
  • Upvoted. Being a non-standard property doesn't make it useless. There are use cases in which you don't need to support anything except webkit. This answer helped me, and the -webkit-filter effect looks more suitable in my case than box-shadow. – Anton Jebrak Nov 24 '16 at 10:33
  • This is the best answer, because it will dropshadow the the content and not the container – smedasn Mar 02 '17 at 21:17
10

@tamir; you cna do it with 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 fiddle http://jsfiddle.net/XUC5q/1/ & your can generate from here http://css3generator.com/

If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers & you can use filter as kyle said like this

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

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • You don't need the moz and webkit prefixes anymore, the latest versions of those browsers support `box-shadow` as is :) – Kyle Jun 21 '11 at 09:26
  • @kyle; i know but it's not work on previous version before Mozilla beta. – sandeep Jun 21 '11 at 09:38
  • 2
    @Kyle - and if you want to support users of older versions? (there are still some out there) – Spudley Jun 21 '11 at 09:39
  • 1
    @kyle; may be you have to update your answer because there are so many people's who did not update there mozilla. – sandeep Jun 21 '11 at 09:50
3

Depends on what your target browsers are. In newer ones it's 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 have to implement workarounds, e.g., based on this example, but you will most probably need extra mark-up.

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
2

late to the party here; however just wanted to add a bit of extra fun..

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

will give you a nice looking padded in image. The padding will give you a simulated white border (or whatever border you have set). the rgba is just allowing you to do an opicity on the particular color; 0,0,0 being black. You could just as easily use any other RGB color.

Hope this helps someone!

Petrogad
  • 4,405
  • 5
  • 38
  • 77
0

You can use CSS3 to create an effect like that, but then you're only going to see it in modern browsers that support box shadow, unless you use a polyfill like CSS3PIE. So, for example, you could do something like this: http://jsfiddle.net/cany2/

kinakuta
  • 9,029
  • 1
  • 39
  • 48