cssimagebackground

Spotify background image effect (CSS)

Does anyone know how to make this?

I have a product image and I need same image "fade" on the background.

Image example

1

This is the spotify example image.

Solution

  • Use this HTML:

    <body>
    <div id="all">
        <img src="your-image.jpg" alt="image" height="200" width="200">
    </div>
</body>

    With this CSS:

    body{
  padding: 0;
  margin: 0;
  background-image: url(your-image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#all{
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

    Now, all the new HTML MUST go inside the <div> with id #all.