Search code examples
cssfilterdropshadow

How to make a rounded drop shadow on a png image

I am trying to recreate a website template I found on Behance. While I found a great solution and learned something new with filter: dropshadow(); I would really like to just make the drop-shadow on my png rounded. I tried border-radius changes but to no attest maybe blur() but that blurs the image, and I hoped you could do something like drop-shadow(blur()); which would be cheeky.

Here is the codepen an image for clarity below and the code. Thanks.

enter image description here

.weapon-1{

    background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    -moz-filter: drop-shadow(0 0 10px #B3135D);
    -webkit-filter: drop-shadow(0 0 10px #B3135D);
    filter: drop-shadow(0 0 10px #B3135D);

}
Solution

  • for rounded drop shadow you can use radial-gradient in background with transparent image.

    original image used in snippet is original image Please refer snippet.

    body{background-color: black}
img {

    /* For browsers that do not support gradients */
    background-image: radial-gradient(circle, white, black, black);
    padding: 50px;
}
    <body>

<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>