DEV Community

Cover image for Remove White Border From Blurry Background Image

Remove White Border From Blurry Background Image

Nazanin Ashrafi on March 28, 2021

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...
Collapse
 
oskarcodes profile image
Oskar Codes

Or set the background color to black

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

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

Collapse
 
oskarcodes profile image
Oskar Codes

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

Thread Thread
 
nazanin_ashrafi profile image
Nazanin Ashrafi

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

Thread Thread
 
oskarcodes profile image
Oskar Codes

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

Thread Thread
 
danspinola profile image
Dan Spinola

Yeah, there's a black outline instead. 😂

Thread Thread
 
sinapirani profile image
SinaPirani

😂😂😂😂😂

Collapse
 
christiankozalla profile image
Christian Kozalla • Edited

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

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

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

Collapse
 
christiankozalla profile image
Christian Kozalla

Nice, thanks you 🌹

Collapse
 
akshayvarshney6 profile image
Akshay Varshney

Great tip. Thanks for writing Nazanin ☺️

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thanks Akshay 😍🙌🙌

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

That's great 🤩 thanks for sharing Naz🙌

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you Ritvik 😍🙏

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

I didn't know about that, thank you 🙏🌹

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you Anjan 🙏🌹

Collapse
 
sinapirani profile image
SinaPirani

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:)