How to Blur Image Edges with CSS

Blurring the edges of a photo in CSS is pretty straightforward, with one gotcha.

The box-shadow CSS 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).

Come watch me use PKM in action on Twitch!

Read These Next

A List of Good Matts

While surely there are bad Matts out there (and ive met a few!!), these are not them.

Extending Jest in Typescript

And addressing the errors it causes!

Traversing Weekly Notes in Obsidian with Templater

And the tragedy of work weeks starting on Monday

Stay in Touch

Each week, I send out something that looks like this. Sign up below if you want in!