Remove White Border From Blurry Background Image
Nazanin Ashrafi

Nazanin Ashrafi @nazanin_ashrafi

About: Trying to teach myself to be a web dev #Self_teaching (with the help of community) I write about the thing I wish I knew earlier...

Joined:
Aug 12, 2020

Remove White Border From Blurry Background Image

Publish Date: Mar 28 '21
52 19

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;
}


Enter fullscreen mode Exit fullscreen mode

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);
}


Enter fullscreen mode Exit fullscreen mode

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 */
}


Enter fullscreen mode Exit fullscreen mode

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



Credit to this guy :

I would consider an overflowing pseudo element to achieve such effect. It would have better browser support than backdrop-filter: jsfiddle.net/ebzs25qt/

Comments 19 total

  • Oskar Codes
    Oskar CodesMar 28, 2021

    Or set the background color to black

    • Nazanin Ashrafi
      Nazanin AshrafiMar 29, 2021

      Sorry I didn't get it. Are asking me how to do that? 🤔

      • Oskar Codes
        Oskar CodesMar 29, 2021

        Instead of creating a pseudo element, there’s a much simpler way to solve the issue, which is to set the background to black.

        • Nazanin Ashrafi
          Nazanin AshrafiMar 29, 2021

          How would setting the background to black blur the image? 🤔

          • Oskar Codes
            Oskar CodesMar 29, 2021

            No, you do both. Set the background to black AND set the blur filter. This way there’s no white outline.

            • Dan Spinola
              Dan SpinolaMar 29, 2021

              Yeah, there's a black outline instead. 😂

  • Christian Kozalla
    Christian KozallaMar 28, 2021

    Very nice, thanks!
    Your featured image of the post looks pretty nice, too. How do you create these?

    • Nazanin Ashrafi
      Nazanin AshrafiMar 29, 2021

      Thank you Christian 🙏🌹
      I made it with canva. It's pretty easy to use. You should definitely check it out

  • Temani Afif
    Temani AfifMar 28, 2021

    I would consider an overflowing pseudo element to achieve such effect. It would have better browser support than backdrop-filter: jsfiddle.net/ebzs25qt/

  • Nazanin Ashrafi
    Nazanin AshrafiMar 29, 2021

    Thank you Anjan 🙏🌹

  • Akshay Varshney
    Akshay VarshneyApr 3, 2021

    Great tip. Thanks for writing Nazanin ☺️

  • Ritvik Dubey
    Ritvik DubeyApr 4, 2021

    That's great 🤩 thanks for sharing Naz🙌

  • SinaPirani
    SinaPiraniMay 20, 2022

    thank you but there are a issue
    if value of backdrop filter increse to 200 the, pseudo element borders be fade
    englisim ziad khob nist, bepazir azma:)

Add comment