CSS blur on background image but not on content

Question

I'm trying to blur the background image, but the main content is blurred too (the <span>)

How can I blur the background without blurring the content?

score 27 · Answer 1 · edited Aug 08 '18 at 12:26

27

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

You can blur the body background image by using the body's :before pseudo class to inherit the image and then blurring it. Wrap all that into a class and use javascript to add and remove the class to blur and unblur.

edited Aug 08 '18 at 12:26

Prashant Pokhriyal

3,727
4
28
40

answered Mar 03 '15 at 03:17

Mike Lee

2,440
26
12

What is :before doing, exactly? I see that without :before the filters are applied to the whole content as well. I understand that, but why is :before preventing this? – aless80 Apr 08 '18 at 13:35
@aless80 `:before` is prepended to selected items (while `:after` is appended). Main difference from direct children of items is that `:before` and `:after` are accessed only through CSS and `content` property is mandatory for them to display. – vintprox Feb 06 '19 at 07:30
:before and :after are pseudo-elements. If you write `.blur-bgimage:before {..}` you're creating a new child-element for `.blur-bgimage` called `::before`. Because it is one of the children of `.blur-bgimage` its properties (e.g. `filter: blur(10px)`) are independent of other siblings. – Kardaw Feb 06 '19 at 18:37

score 18 · Accepted Answer · edited Aug 08 '18 at 13:19

18

You could overlay one element above the blurred element like so

DEMO

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

edited Aug 08 '18 at 13:19

Prashant Pokhriyal

3,727
4
28
40

answered Dec 05 '13 at 21:44

Kevin Lynch

24,427
3
36
37

5

sorry i cn't use absolute on div :( – itsme Dec 05 '13 at 21:54
1

You could blur the background image in photoshop prior to uploading it, Otherwise you will need to use javascript. There is currently no way of blurring a div without it's contents also becoming blurred with CSS only. Overlaying them is the only way unfortunately. `blur.js` is good for this kind of thing. – Kevin Lynch Dec 05 '13 at 21:57
sorry i unaccepted since on firefox it doesn't works http://jsfiddle.net/jLGFp/3/ – itsme Dec 06 '13 at 13:53
2

You didn't state you need firefox support in your question. Unless stated otherwise, the question it is assumed the method will only work in supported browsers. For firefox support `blur` is not possible. You will need to use an `svg` which is a different question really. It is covered here http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/. – Kevin Lynch Dec 06 '13 at 14:57

score 11 · Answer 3 · edited Aug 08 '18 at 13:18

11

Add another div or img to your main div and blur that instead. jsfiddle

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}

edited Aug 08 '18 at 13:18

Prashant Pokhriyal

3,727
4
28
40

answered Dec 05 '13 at 21:40

TreeTree

3,200
3
27
39

But this creates a scroll in the page :( – Bruno Casali Jul 18 '16 at 13:56

score 9 · Answer 4 · answered Jul 14 '19 at 02:17

`backdrop-filter`

Unfortunately Mozilla has really dropped the ball and taken it's time with the feature. I'm personally hoping it makes it in to the next Firefox ESR as that is what the next major version of Waterfox will use.

MDN (Mozilla Developer Network) article: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Mozilla implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

From the MDN documentation page:

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

score 6 · Answer 5 · answered Aug 01 '21 at 10:48

6

What you're looking for is the "backdrop-filter" property instead of just "filter".

Example:
backdrop-filter: blur(5px); ✔️
filter: blur(5px); ❌

answered Aug 01 '21 at 10:48

Francisco Jesus

115
1
10

score 2 · Answer 6 · edited Aug 08 '18 at 12:24

2

jsfiddle.

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

What about this? No absolute positioning on div, but instead on img and span.

edited Aug 08 '18 at 12:24

Prashant Pokhriyal

3,727
4
28
40

answered Dec 05 '13 at 22:07

JMercer

352
2
9

1

Apologies, this is basically what @TreeTree said, forgot to scroll down. – JMercer Dec 05 '13 at 22:10
Shouldn't `img` be a single tag? – Tariqul Islam Feb 17 '23 at 21:51

CSS blur on background image but not on content

6 Answers6

`backdrop-filter`

Linked

Related