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.