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.
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: –
- Blur – to give the shadow a blurred / less clean shadow blur (adjust to your own liking)
- Contrast 0 – knocks out the colours of the image to give a dark shadow appearance
- 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
- 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.
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 –
- WebKit Drop Shadow Filter – to drop the shadow
- 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
