PNG Shadows with CSS PNG Shadows with CSS png shadows with css 862x402

PNG Shadows with CSS

Glenn Blog Leave a Comment

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

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.

<div class="png-container">
<div class="png-div"><img class="image" src="your-image.png" />
<img class="image-shadow" src="your-image.png" /></div>
</div>

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)
.png-div {
  position: relative;
  z-index: 2;
  float: left;
}

.png-container {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 90px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.image {
  position: relative;
  z-index: 1;
}

.image-shadow {
  position: absolute;
  left: auto;
  top: -9px;
  right: -79px;
  z-index: 0;
  -webkit-filter: blur(9px) contrast(0%) brightness(73%);
  filter: blur(9px) contrast(0%) brightness(73%);
  -webkit-transform: skew(-15deg, 0deg);
  -ms-transform: skew(-15deg, 0deg);
  transform: skew(-15deg, 0deg);
}

You can also adjust the position of the shadow by simply changing the absolute position of the ‘image-shadow’ image – top, left, right, bottom.

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

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 filter) is position absolute behind it with a position transform.

<div class="png-container">
<div class="png-div"><img class="image" src="your.png" />
<img class="image-shadow-1" src="yourr.png" /></div>
</div>

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 the following:-

.image-shadow-1 {
  -webkit-filter: drop-shadow(40px -5px 0 #181B00);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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.

Additional IE support is available with the following CSS specific code, but we find little point in using it for the old Internet Explorer Browsers:-

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=40,OffY=5,Color='#181B00')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=40,OffY=5,Color='#181B00')";

Find a retrospective cross-browser way of doing this and let us know in the comments below!

About the Author
PNG Shadows with CSS PNG Shadows with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.