Apply Shadow to object inside PNG Image using CSS

Internet is using lots of images in webpages to simply make user to understand concept easily rather than swim into sea of words. So that makes developer to work more efficiently highlight image in webpage.

Box-shadow is a CSS property which gives shadow to DOM element in HTML. Whenever you use it, It will give shadow to outline of element not object.

CSS Filter

In initial days,  Photoshop was only tool which creates shadow. But now CSS3 has shadow options to object inside PNG Image. Some of basic photoshop features for image are bundled inside propery called CSS Filter Effects. Almost most of modern browsers have implemented that feature and render properly.

CSS Filters has blur, drop-shadow, grayscale, brightness, contrast, invert, opacity, sepia, hue-rotate and saturate. Even though it has lots of filter functions, Now am gonna demonstrate and explain how drop shadow is different from box-shadow and how to apply drop shadow in object inside PNG Image.

Drop-Shadow vs Box-Shadow

Above code shows simple HTML IMG tag with src of PNG image. Now we gonna do some CSS animation which makes you clearly understand difference between Box-shadow and CSS filter Drop shadow.

While on no action, It shows box of image with shadow. Shadow never been there in object inside PNG. All shadows are like outer layer of PNG image.

Now move click on image or hover, You can see drop shadow only below object in PNG image. In past, It was only done by using two image i.e., one without drop shadow image and another with drop shadow image. Now no need of multiple image to achieve this visual. These effects are rendered from modern browsers supported by CSS Filters feature. You can see live by clicking demo button. Download script for your future reference through download button.