Remove White Border From Blurry Background Image

I was half way through writing about another topic but then got stuck with fixing the white border. So I was like okay change of plans!

Now let's talk about the annoying white border!
If you create a blurry background image this will happen :

You see those white edges? In this article I'll show you how to get rid of them

• First create a simple background image

.blurry-bg {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

You could add filter: blur(); but it'll add white edges, like the first pic that I showed you. So in order to get rid of them We need to use pseudo element and give it backdrop-filter

.blurry-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px);
}

We have successfully managed to get rid of that annoying blurry border. But let's say you want to add something in front your image , there is a little trick for that, which I'll talk about it in my next week's article . So stay tuned!

---

Someone just pointed out another way of doing this trick and it has better browser support than backdrop-filter

So instead of setting a background image for blurry-bg , we could just set it for its pseudo element and then give it filter: blur();

.blurry-bg::before {
  content: "";
  background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)),
    url(img/000333.jpg);
  position: fixed;
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(5px);
  margin: -10px; /* this will do the trick */
}

PS. if you use this second trick, you can easily add texts and image in front of your background.

Credit to this guy :

---