HTML+CSS: How to add shadow (as image) to image?

html css image position shadow

13,656

Solution 1

You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.

This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.

Hope this helps.

Solution 2

If your images are going to be irregular sizes, an SVG as background-image is what you're looking for. Adobe Illustrator ($$$) or Inkscape (free) can be used to create the unusually shaped shadow as an SVG file. From there, all that should be necessary is this CSS:

.myImage {
    background: url(myShadow.svg) no-repeat;
    background-size: 100% 100%;
    padding: ? ? ? ?; // the values will have to depend on your bg image
}

In depth explanation can be found here: http://designfestival.com/a-farewell-to-css3-gradients/

If your images are all the same size or you don't care about any graininess that might occur when it is resized, then a PNG as your background would work just as well.

Solution 3

This is because, that would not be supported by that particular browser. You might be missing vendor-prefix

Opera 10.50 (currently only available on Windows) is the first web browser to have an implementation without a vendor-prefix, whereas Firefox, Safari and Google Chrome all need it for now. So, this code makes it work in all those web browsers

.shadow {
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000;
}

Further you can refer these links

Drop shadow with css for all web browser

Box shadow

Solution 4

This is a more generic solution, but may be useful to others. I added the following to the <head> section of the HTML:

<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>

and it worked great for adding shadows to all images.

View more solutions

13,656

user984621

Updated on September 14, 2022

Comments

user984621 over 1 year
I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.

Here's the sample, what I am trying to achieve:

And what I did until now:
```
      <div style="padding-left: 15px; position:absolute;">
        <img src="avatar.png" alt="" />
        <img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
      </div>
```
It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?