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).

Discuss this post on Reddit

Read These Next

80 Projects in (80 - 28) Weeks

A look back on how I created 80 unique projects in 2020.

My Favorite Blender Render Ive Created (To Date)

We say we want peace of mind when we really want peace from mind. - Naval Ravikant

The Necromancy of Justification

Why its good to let old ideas die - Science Moves Forward One Funeral At a Time

Stay in Touch

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