You can add photo-realistic shadows to transparent PNG files with CSS only. Here is a couple of approaches which work in modern browsers including Microsoft Edge, but not IE11 and below, but hey we don't like those nasty old IE browsers anyway, do we...NB The below are real CSS shadows on transparent PNG images

1. Add PNG Shadow with CSS Filters

This is the most succinct approach and visually pleasing option that uses CSS filters Blur, Contrast, Brightness & Skew Transform and uses an image and image clone.

PNG Shadows with CSS PNG Shadows with CSS dent scratch repair
PNG Shadows with CSS PNG Shadows with CSS dent scratch repair

The HTML Markup

Here we are using a Flexbox Div to centre the image container div and placing an image, and an image clone into the div. The uppermost image is relative and the shadow image (with the CSS filters) is position absolute behind it.

The CSS

The CSS filters do the heavy lifting here and we are using the following: -

  1. Blur - to give the shadow a blurred / less clean shadow blur (adjust to your own liking)
  2. Contrast 0 - knocks out the colours of the image to give a dark shadow appearance
  3. Brightness - adjusts the light intensity of the shadow (adjust to your own liking)In this example, I've also used a CSS Transform Skew to add extra realism to the angle of the shadow
  4. Skew - adjusts the angle of the shadow (adjust to your own liking)

2. Add PNG Shadow with WebKit Drop Shadow CSS Filter

This is an alternate option to the above and uses just the WebKit drop shadow filter along and also uses an image and image clone a with a position transform on the shadow image.

PNG Shadows with CSS PNG Shadows with CSS dent scratch repair
PNG Shadows with CSS PNG Shadows with CSS dent scratch repair

The HTML Mark-up

Here we are using a Flexbox Div to centre the image container div and placing an image, and an image clone into the div. The uppermost image is relative and the shadow image (with the CSS filter) is position absolute behind it with a position transform.

The CSS

The CSS is exactly the same except for the final step on the shadow which gives us -

  1. WebKit Drop Shadow Filter - to drop the shadow
  2. Translate Position - to centre the background cloned image with the shadow below it's parent image

To apply this version use the same code, but replace '.image-shadow' class with '.image-shadow-1'.

The main shadow adjustment here is on the -webkit-filter and allows you to change the x y position as well as the shadow colour. It's clean and simple.