Drop shadow for PNG image in CSS

Question

I have a PNG image, that has free form (non square).

I need to apply drop-shadow effect to this image.

The standard approach ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... displays shadows for this image, like it is a square. So, I see my image and square shadow, that doesn't follows the form of object, displayed in image.

Is there any way to do it properly?

Solution 1

Yes, it is possible using filter: dropShadow(x y blur? spread? color?), either in CSS or inline:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Solution 2

A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Some comparisons between true drop-shadow and box-shadow and an article on the technique I've just described.

I hope this helps!

Solution 3

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

That worked great for me. One thing to note tho in IE you need the full color (#222222) three characters don't work.

Solution 4

If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program ImageMagick. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the documentation for shadows, and the general usage instructions have a lot of cool examples of things that can be done to images.

If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)

Solution 5

As Dudley mentioned in his answer this is possible with the drop-shadow CSS filter for webkit, SVG for Firefox and DirectX filters for Internet Explorer 9-.

One step further is to inline the SVG, eliminating the extra request:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

View more solutions

Comments

[AntonAL]

Thanks for reply. But, adding image in editor will have problems in the future, when i will have >100 images and should tweak shadows a little. T he best solution of my problem - is to add additional shadow image below each image in question with jQuery.

[leo]

While it's a solution, it does not answer the question!

[mrcendre]

Even more late to the party, but +1 for the cross-plateform CSS filter property... Though, I don't think HTML SVG tags be needed, any PNG with alpha channel will do the trick

[SG1]

The asker is attempting to have the browser render the shadow, not execute scripts on the server that can create shadows. This is useful information but not the same problem space.

[javsmo]

Dudley Storey is right. Without the SVG, the shadow doesn't appear in Firefox. @AntonAL could accept this answer.

[Charles Goodwin]

This is a worse version of Dudley Storey's answer

[BeachInCalifornia.com]

I could seen this looking quite nice when modified a little

[al45tair]

“Courtesy ad-click”? Seriously, how is ripping off advertisers a good thing for the ’Net? Many of us are advertisers ourselves, or are paid by them, so triggering charges for advertisers for adverts for products you are never going to buy is a really unpleasant thing to do. If you are interested in an ad, click it by all means, but don’t do this!

[Rid Iculous]

Oh, get off your moral high-ground, Alastair. The real-world looks a bit different. "Ripping off advertisers"? Really? LOL - Give me a break, man. I've been in advertising and marketing for nearly 30 years. To place the odd courtesy click has no influence whatsoever other than supporting the sites you use FOR FREE. If you're worried about inflation of prizes etc, worry about the increasingly monopolizing trends throughout the industry. That's what's distorting advertising prizes, not the odd courtesy click.

[Oki Erie Rinaldi]

It works well.. better than if I define the SVG inside HTML tags. (firefox)

[Andrew Macheret]

Couple of notes to get this to work: 1. You need to create the shadow directory before running this command (such as with mkdir shadow) 2. $i should be quoted (as in "$i") or it will choke if an image has a space in its filename: for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done

[Andrew Macheret]

3. The resulting files will be named filename.png.png. Here's a fully working version: for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done

[psmears]

@AndrewMacheret: Good points - though note this is meant to be an illustration of what can be done, rather than a fully working program! I've fixed the double .png suffix and the quotes; the directory thing I feel would just get in the way...

[tb11]

DX filters no longer work on IE... Is there any new solution for IE? msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

[Raptor007]

These days Firefox supports filter: drop-shadow(x y blur color); so the SVG trick should no longer be necessary.

[C-F]

No IE support... :(

[mjs]

other than webkit ?

[RyanNerd]

Can we not all just agree that IE should have been tossed into the garbage heap years ago? Edge is slightly better, but holy cow M$ did you purposefully set software development back to the dark ages with IE? What an abomination.

[barrypicker]

This looks horrible on FF and IE

[barrypicker]

I appreciate the straight-forward answer. None of the examples above work for me.

[Xitcod13]

when i answered it wasnt possible I guess now it is. Future is here!

[Bryant James]

IE should get with the times :P

[Brett Donald]

-webkit-filter is no longer necessary

[evilReiko]

2019: what's IE? :P

[AmigoJack]

Not supporting three character colors is breaking CSS on purpose - what else do I need to check? Color names like red? Functions like rgb() and rgba() and hsl()? Constants like transparent and currentColor? Is it even case insensitive for #20Beef? IE version might be relevant, tho.

[jewishmoses]

2021: what's IE? :P

[sohag513]

2022: what's IE?

[HudsonGraeme]

2023: what's IE? Wait a minute...

[danbars]

brightness filter needs "%" sign: brightness(-100%)

[NoSkill]

June 15, 2022 - RIP IE.