CSS drop shadow on a .png image issue

Question

I have a question that drives me nuts. When I use box-shadow on an .png image, everything works normally although it forms a square around the image. To solve this we can use drop-shadow, which indeed follows the form of the image. However I can move the shadow left, right, up & down making it more or less blurred. But I can't find out how to spread the shadow! It seems like the 4th value cancels everything out of shadow.

The box shadow:

-webkit-box-shadow: 0px 0px 130px 150px rgba(39,21,6,1);
-moz-box-shadow: 0px 0px 130px 150px rgba(39,21,6,1);
box-shadow: 0px 0px 130px 150px rgba(39,21,6,1);

The drop shadow:

filter: drop-shadow(0px 130px 150px rgba(39,21,6,1));

The 4th value (spread) is not supported by most browsers – pol Feb 13 '17 at 17:22 — pol, Feb 13 '17 at 17:22
The 4th value (spread) is not supported by most browsers – Feb 13 '17 at 17:25 — , Feb 13 '17 at 17:25

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

The question you've asked has multiple, popular answers in another thread! :)

Drop shadow for PNG image in CSS

edited May 23 '17 at 12:01

Community

1
1

answered Feb 13 '17 at 17:13

Kyle Holmberg

1,059
9
21

CSS drop shadow on a .png image issue

1 Answers1