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

How NOT to add a Youtube Player to VSC

Sometimes projects fall flat due to a higher power

Why I use the Head of Leda everywhere

Short answer: I like it. Longer answer...

VODs, Clips, and Improv

Highlight clipped from stream: TRUE OBSIDIANERS ONLY; THE SETUP (META)

Stay in Touch

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