My image's box shadow is so ugly!

HTML-CSS
1

I’m working on my tribute page project. I’m trying to add a box shadow like this:http://developers-club.com/posts/154211/
However, somehow a chunk of the background to my image seems to be getting edited along with my image.
Why is this and how can I get a smooth effect, like DIckens’ photo is blurred into shadow around the edges?

[https://codepen.io/SKhcodes/pen/QmMMqb]

2

Something like this you were trying to achieve?

3

Box-shadow has 4 parameters, x-offset, y-offset, spread and shadow color.

You want some spread for a soft look. As for the shadow color, I usually get nicer results using rgba() format instead of straight #rrggbb. Rgba() allows you to adjust some opacity in the color.

1 Like