Drop shadow giving box shadow effect in png

Question

I am trying to give my png image a drop shadow, but every time I tried to do that, I am getting a rectangular box shadow. Can anyone please explain what I am doing wrong. Below is the code for reference:-

JS code:-

function FirstHeading(){
    return(
    <div>
        <div className = "row">
            <div className = "column1">
                <h1>I<br/>AM<br/>HRITIK</h1>
            </div>  
            <div className="column2">
                <img className = "myPic" src={myPic} />
            </div>     
        </div>
    </div>
    );   
}

CSS:-

.myPic {
  height: 577px;
  width: 432px;

  padding-top: 10px;
  filter: drop-shadow(0 0 0.75rem crimson);
}

Please note, the pic is very irregular.

Edit1: Yes, My image is transparent. I edited it myself using photopea, also if there is something wrong with the photo how would I know that, if anyone has any clue please share.

Edit2: I am posting the adding the picture to my question, hope I did right. img

Seconding @Paulie_D that perhaps you have a non-transparent `.PNG`, or a different filetype that has the wrong extension (such as a `pic.jpg` file that someone simply renamed `pic.png`). You probably have to upload and use the file in question or a similar file, because without further debugging information in a [mcve] this is going to prove difficult to provide any further direction for. — Alexander Nied, Apr 21 '21 at 18:30
_"Yes, My image is transparent. I edited it myself using photopea, also if there is something wrong with the photo how would I know that, if anyone has any clue please share."_ -- I'd recommend taking the working image from @Paulie_D 's example and trying to swap it into your code-- if it works, then the issue is with your image; if it doesn't, then the issue is with your code. — Alexander Nied, Apr 21 '21 at 18:32
Alexander I tried running the code with @Paulie_D 's example image, surprisingly it didn't work too I think it React's Issue — Dr_Doggo, Apr 21 '21 at 18:50
I'm still not able to reproduce the issue. The drop shadow works with the image you provided. I did it on jsFiddle with a [react template](https://jsfiddle.net/boilerplate/react-jsx). Can you try it there and see if it works for you? — BSMP, Apr 21 '21 at 18:58
Also worth considering-- do you have any webpack build process (or whatever build you are using) that is automatically processing images? If so, perhaps there is a problem there... — Alexander Nied, Apr 21 '21 at 19:06

score 2 · Answer 1 · answered Apr 21 '21 at 18:50

2

Your CSS works, I suggest there is something else going on, perhaps with your JS/React

img {
  filter: drop-shadow(0 0 0.75rem crimson);
}

<div>
  <img src="https://i.stack.imgur.com/F5ZXq.png" alt="" />
</div>

answered Apr 21 '21 at 18:50

Paulie_D

107,962
13
142
161

Drop shadow giving box shadow effect in png

1 Answers1