How to remove white border from blur background image

Question

How to remove the white blur border from the background image.

<div class="background-image"></div>

CSS, i tried adding margin:-10px but it doesn't work

.background-image {
  background: no-repeat center center fixed; 
   background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ; 
  background-size: cover;
  display: block;
  height: 100%;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  margin:0px auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

 }

http://jsfiddle.net/maio/8wq132nd/1/

Just remove all the vendor prefixed blur attributes? e.g. ( -webkit-filter: blur(5px);-moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);) I'm not sure if this is the question? — Richard Miles, Mar 05 '15 at 05:52
Hope this link will help you, [How to apply a CSS 3 blur filter to a background image that I am setting with background-image][1] [1]: http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba — shaheer, Mar 05 '15 at 06:02

score 61 · Answer 1 · answered Mar 22 '17 at 22:40

61

The simplest way to do it is by adding transform: scale(1.1). Try it here.

#overlay {
 position: fixed;
 left: 22.5em;
 top: 3em;
 height: 75%;
 width: 50%;
 background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png");
 background-size: cover;
 filter: blur(9px);
 transform: scale(1.1); 
}

answered Mar 22 '17 at 22:40

Moaaz

730
5
11

5

thought this scales the image larger, not quite perfect if you want the image to remain the same size and just want to remove the white border – Sgnl Jun 30 '17 at 01:47
3

It also creates a scroll bar for the overflow in webkit browsers that can't be removed even with overflow: hidden. See: https://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome – VPaul Feb 03 '18 at 13:01
I did this, but on Android WebView there is scrolling. Even though I added overflow:hidden. I have a feeling it is because my background is bigger than the html element – Akin Hwan May 25 '18 at 19:48
Could you explain, please, the root reason of this glitch ? – Boris D. Teoharov Aug 23 '18 at 07:03
2

I added `overflow: hidden` to the parent div to get rid of the scroll bar that `transform: scale(1.1)` creates. – Joshua Jun 21 '20 at 05:22
using ``scale(1.01)`` also hides the edges. It just very slightly zooms the image. I prefer 1.01 – Khaled Dec 10 '22 at 08:33

W4G1 · Answer 2 · 2022-08-08T07:56:27.147

45

Up-to-date answer (2022)

You can achieve this effect with just css by using backdrop-filter on an overlaying element.

.blurred::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}

.blurred {
  position: relative;
  width: 500px;
  height: 300px;
  background: no-repeat center center;
  background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
  background-size: cover;
}

<div class="blurred"></div>

Update (8-8-2022): This is now also fully supported in Firefox

edited Aug 08 '22 at 07:56

answered Mar 02 '20 at 15:49

W4G1

1,337
1
11
15

3

The brilliant thing about this is that if you wanted to only blur half the height of the background image for example, just set `height: 50%` on the `::before` class – The Codesee May 10 '20 at 10:13
2

thanks a lot !! This works like charm!! this answer should be accepted!! – bigfanjs Nov 27 '20 at 16:42
5

doesn't work in firefox. backdrop-filter is not yet supported by default in firefox. manually we have to enable – minigeek Mar 30 '21 at 13:48
1

@minigeek Yes, I have stated that already in my answer. – W4G1 Mar 31 '21 at 14:11
1

Nice, Clean and more control over 'filter' ... Should be accepted as Answer! – c0de b0unty May 11 '22 at 23:11
It should be noted that backdrop-filter was disabled/is bugged in Firefox. Some people say it works, some don't. On v105 it doesn't work for me, even with flags enabled. – Zach Oct 04 '22 at 06:41
working for me in Firefox 106 – sbdchd Dec 03 '22 at 23:37

score 10 · Accepted Answer · answered Mar 05 '15 at 17:40

I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.

<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>

css

 .background-image {
  background: no-repeat center center fixed; 
  background-size: cover;
  display: block;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin:-5px;

 }

js fiddle

http://jsfiddle.net/2pgdttLh/

score 5 · Answer 4 · answered Jan 16 '19 at 18:09

5

This worked for me: Added two fixed images, one with z=-1, other with z=0, blurred the first one.

answered Jan 16 '19 at 18:09

Gaurav Pant

962
10
30

This approach has the trade-off that there's a new border around the blurred top layer consisting of a sharp version of the original image. But all the approaches do seem to have trade-offs! – Sarreph Jun 17 '21 at 15:04

killovv · Answer 5 · 2022-05-19T01:44:15.593

2

The blur adds transparency around the edges, so all you need to do is remove the alpha channel.

Here are a couple of examples of how to do this with SVG filters.

<filter id="omega"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1"/></filter>

<filter id="omega"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>

You can implement blur immediately in the SVG filter, or add a filter to remove transparency after the blur

filter: blur(50px) url(#omega);

or pure CSS

filter: blur(50px) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');

edited May 19 '22 at 01:44

answered May 19 '22 at 01:07

killovv

51
3

This pure CSS approach worked for me, with minimal code impact. Thank you! – colin moock Apr 11 '23 at 21:13
Is there a technical reason for `slope="10"` instead of `slope="0" intercept="1"`? Or is it just for file-size? – Holzchopf Jun 08 '23 at 12:48
I didn’t delve into the documentation, I just saw such a method in some examples, so I took it, the math in the function uses both parameters (C’ = slope * C + intercept), but now slope seems to be outdated and can be disabled – killovv Jun 09 '23 at 15:30

score 1 · Answer 6 · answered Dec 02 '21 at 21:45

1

Use a SVG-Blur filter.

filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");

"stdDeviation" is your intensity.

source

answered Dec 02 '21 at 21:45

XYZER

13
4

bad practice. it's too heavy for perfomance – pavuk Feb 07 '22 at 11:02

score 0 · Answer 7 · answered Jun 10 '16 at 04:13

0

I added a negative margin to the container: margin: -5px

answered Jun 10 '16 at 04:13

Troy Co.

27
1

score 0 · Answer 8 · answered Mar 30 '19 at 10:25

Here's a function I settled on based on @Prime 's answer.

In order for it to work the image must be positioned inside a <div/> having the width and height of the image (explicitly set).

    function addBlur(style, radius) {
      return {
        ...style,
        // https://caniuse.com/#feat=css-filters
        filter: `blur(${radius}px)`,
        // Works around the white edges bug.
        // https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image
        width: `calc(100% + ${2 * radius}px)`,
        height: `calc(100% + ${2 * radius}px)`,
        marginLeft: `-${radius}px`,
        marginTop: `-${radius}px`
      }
    }

but ads a white border in firefox annoying (had to add background color on body tag to fix) — minigeek, Mar 30 '21 at 14:21

score -1 · Answer 9 · answered Nov 08 '19 at 09:51

-1

If the white borders are caused by the background color of the body, apply margin: 0; on body since margins are not 0 by default;

answered Nov 08 '19 at 09:51

D D

37
3

score -2 · Answer 10 · answered Mar 05 '15 at 06:07

-2

padding: 10px 10px;

add this in your css to remove the white blur border for bottom

answered Mar 05 '15 at 06:07

RAJ

542
3
8

2

You can white that shorthand like this: `padding: 10px;` – rebellion Sep 14 '15 at 16:23

How to remove white border from blur background image

10 Answers10

Up-to-date answer (2022)

Linked