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

User · Answer

There s a proposed feature which you could use for arbitrarily shaped drop shadows  You could see it here  courtesy of Lea Verou   http   www netmagazine com features hot-web-standards-css-blending-modes-and-filters-shadow-dom  Browser support is minimal  though

User · Answer

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

User · Answer

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  -

User · Answer

This won t be possible with css - an image is a square  and so the shadow would be the shadow of a square  The easiest way would be to use photoshop gimp or any other image editor to apply the shadow like core draw

User · Answer

Yes  it is possible using filter  dropShadow x y blur  spread  color    either in CSS or inline    x000D   x000D  img   x000D    width  150px  x000D    -webkit-filter  drop-shadow 5px 5px 5px  222   x000D    filter  drop-shadow 5px 5px 5px  222   x000D    x000D   lt img src  https   cdn freebiesupply com logos large 2x stackoverflow-com-logo-png-transparent png  gt  x000D   x000D   lt 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    gt  x000D   x000D   x000D

User · Answer

A trick I often use when I just need  a little  shadow  read  contour must not be super-precise  is placing a DIV with a radial fill 100 -black-to-100 -transparent under the image  The CSS for the DIV looks something like    shadow320x320              background  -moz-radial-gradient center  ellipse cover  rgba 0 0 0 0 58  0   rgba 0 0 0 0 58  1   rgba 0 0 0 0  43   rgba 0 0 0 0  100       FF3 6             background  -webkit-gradient radial  center center  0px  center center  100   color-stop 0  rgba 0 0 0 0 58    color-stop 1  rgba 0 0 0 0 58    color-stop 43  rgba 0 0 0 0    color-stop 100  rgba 0 0 0 0        Chrome Safari4             background  -webkit-radial-gradient center  ellipse cover  rgba 0 0 0 0 58  0  rgba 0 0 0 0 58  1  rgba 0 0 0 0  43  rgba 0 0 0 0  100       Chrome10  Safari5 1             background  -o-radial-gradient center  ellipse cover  rgba 0 0 0 0 58  0  rgba 0 0 0 0 58  1  rgba 0 0 0 0  43  rgba 0 0 0 0  100       Opera 12             background  -ms-radial-gradient center  ellipse cover  rgba 0 0 0 0 58  0  rgba 0 0 0 0 58  1  rgba 0 0 0 0  43  rgba 0 0 0 0  100       IE10             background  radial-gradient ellipse at center  rgba 0 0 0 0 58  0  rgba 0 0 0 0 58  1  rgba 0 0 0 0  43  rgba 0 0 0 0  100       W3C            filter  progid DXImageTransform Microsoft gradient  startColorstr   94000000   endColorstr   00000000  GradientType 1       IE6-9 fallback on horizontal gradient          This will create a circular black faded-out  dot  on a 320x320 DIV  If you scale the height or width of the DIV you get a corresponding oval  Very nice to create eg shadows under bottles or other cylinder-like shapes   There is an absolute incredible  super-excellent tool to create CSS gradients here   http   www colorzilla com gradient-editor   ps  Do a courtesy ad-click when you use it   And  no I m not affiliated with it  But courtesy clicking should become a bit of a habit  especially for tool you use often    just sayin    since we re all working on the net

User · Answer

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          lt  -- HTML elements here -- gt    lt svg height  0  xmlns  http   www w3 org 2000 svg  gt       lt filter id  drop-shadow  gt           lt feGaussianBlur in  SourceAlpha  stdDeviation  4   gt           lt feOffset dx  12  dy  12  result  offsetblur   gt           lt feFlood flood-color  rgba 0 0 0 0 5    gt           lt feComposite in2  offsetblur  operator  in   gt           lt feMerge gt               lt feMergeNode  gt               lt feMergeNode in  SourceGraphic   gt           lt  feMerge gt       lt  filter gt   lt  svg gt    Some comparisons between true drop-shadow and box-shadow and an article on the technique I ve just described   I hope this helps

User · Answer

Here is ready glow hover animation code snippet for this   http   codepen io widhi allan pen ltaCq  -webkit-filter  drop-shadow 0px 0px 0px rgba 255 255 255 0 80

User · Answer

Maybe you are in search of this  http   lineandpixel com blog png-shadow  img   png-shadow  5px 5px 5px  222

User · Answer

When i posted this originally it wasnt possible so this is the workaround  Now I simply suggest using other answers   There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center    If my trick doesn t work then you have to cut up the image and do it for every single of the little images   the more images the more accurate the shadow will look  but for most images it looks alright with just one img   what you need to do is to put a wrap div around your img like so   lt div id  imgWrap  gt       lt img id  img  scr  imgLocation  gt   lt  div gt    then you put an empty divider inside the wrap  this will serve as the shadow    lt div id  imgWrap  gt       lt div id  shadow  gt   lt  div gt       lt img id  img  scr  imgLocation  gt   lt  div gt    and then you have to make the shadow appear behind the img with CSS    img       z-index  1      shadow       z-index  0    make this value negative if doesnt work       box-shadow  0 -130px 180px 150px rgba 255  255  0  0 6       width  0      height  0      now position the imgWrap to position the original img    to center the shadow of the img you can mess with the first two values of the box-shadow making them negative      or you can position the img and the shadow divs absolutely  making img top and left values   0 and the shadow div values   half of img width and height respectively   If this looks horrid cut your img up and try again     If you don t want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I ll explain later

User · Answer

You can t do this reliably across all browsers  Microsoft no longer supports DX filters as of IE10   so none of the solutions here work fully   https   msdn microsoft com en-us library hh801215 v vs 85  aspx  The only property that works reliably across all browsers is box-shadow  and this just puts the border on your element  e g  a div   resulting in a square border   box-shadow  horizontalOffset verticalOffset blurDistance spreadDistance color inset   e g   box-shadow  -2px 6px 12px 6px  CCCED0    If you happen to have an image that is  square  but with uniform rounded corners  the drop shadow works with border-radius  so you could always emulate the rounded corners of your image in your div   Here s the Microsoft documentation for box-shadow   https   msdn microsoft com en-us library gg589484 v vs 85  aspx

User · Answer

In my case it had to work on modern mobile browsers  with a PNG image in different shapes and transparency  I created drop shadow using a duplicate of the image  That means I have two img elements of the same image  one on top of the other  using position  absolute   and the one behind has the following rules applied to it    image-shadow     filter  blur 10px  brightness -100     -webkit-filter  blur 10px  brightness -100     opacity   5      This includes brightness filter in order to darken the bottom image  and a blur filter in order to cast the smudgy effect drop shadow usually has  Opacity at 50  is then applied in order to soften it    This can be applied cross browser using moz and ms flags   Example  https   jsfiddle net 5mLssm7o

User · Answer

Just add this   -webkit-filter  drop-shadow 5px 5px 5px  fff    filter  drop-shadow 5px 5px 5px  fff      example    lt img class  home-tab-item-img  src  img search png  gt     home-tab-item-img      -webkit-filter  drop-shadow 5px 5px 5px  fff        filter  drop-shadow 5px 5px 5px  fff

User · Answer

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  lt svg height  0  xmlns  http   www w3 org 2000 svg  gt  lt filter id  drop-shadow  gt  lt feGaussianBlur in  SourceAlpha  stdDeviation  4   gt  lt feOffset dx  12  dy  12  result  offsetblur   gt  lt feFlood flood-color  rgba 0 0 0 0 5    gt  lt feComposite in2  offsetblur  operator  in   gt  lt feMerge gt  lt feMergeNode  gt  lt feMergeNode in  SourceGraphic   gt  lt  feMerge gt  lt  filter gt  lt  svg gt  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

User · Answer

Add border with radius in you class if its a block  because by default shadow will apply on block border  even if your image have rounded corner    border-radius  4px    change its border radius according to your you image corner  Hope this help

[css] Drop shadow for PNG image in CSS

Examples related to css

Examples related to image

Examples related to png

Examples related to transparency