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. ๐Ÿ˜‚

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