Spotify background image effect (CSS)

Question

Does anyone know how to make this?

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

Image example

This is the spotify example image.

Answer 1

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 .

Spotify background image effect (CSS)

Question

1 answers

solution1
0 2023-01-15 05:40:03

Spotify background image effect (CSS)

Question

1 answers

solution1 0 2023-01-15 05:40:03

solution1
0 2023-01-15 05:40:03