How to create a blurred duplicate background image effect with CSS

Other Questions Spotify
1

I’m trying to recreate a visual effect similar to what Spotify uses in their interface.

Basically, I have a main product photo that displays normally, but I want to take that same image and create a blurred, faded version of it that appears as the background behind the main image.

The background version should be:

  • Much more blurred than the original
  • Partially transparent or faded
  • Positioned behind the main image

I’ve seen this technique used in many modern web designs where the background seems to “echo” the main content image. Has anyone implemented something like this before? What CSS properties would work best for achieving this layered image effect?

I’m wondering if I need to use multiple div elements or if there’s a way to do this with pseudo-elements like ::before or ::after.

2

Built this exact effect for a music player last year. Pseudo-elements are the way to go - cleanest approach by far. Set your main container to position: relative, then use ::before for the background duplicate. Use content: '' with the same background image and background-size: cover. Hit it with filter: blur(20px) and drop opacity to 0.3-0.5. Position it absolutely with z-index: -1 so it sits behind your main image. Pro tip - scale the pseudo-element to transform: scale(1.1) or you’ll get nasty edge artifacts from the blur. Performance is solid since it’s all CSS filters.