Blurring the edges of a photo in CSS is pretty straightforward, with one gotcha.
To blur a photo we need to use
box-shadow in a way where the shadow "eats" the image.
For this effect to work, the blur must be the same color as the surrounding background, and inset must be used.
I made an example leveraging this blur trick in my Kingdom Hearts portfolio (desktop only).
Each week, I send out something that looks like this. Sign up below if you want in!