Blurring the edges of a photo in CSS is pretty straightforward, with one gotcha.
The
box-shadowCSS property adds shadow effects around an element's frame
box-shadow - CSS: Cascading Style Sheets | MDN
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).
While surely there are bad Matts out there (and ive met a few!!), these are not them.
And addressing the errors it causes!
And the tragedy of work weeks starting on Monday
Each week, I send out something that looks like this. Sign up below if you want in!