Is it possible to get a background blur effect with pure CSS?

Question

While creating my new website I stumbled upon this issue:

I want the everything that is behind the navbar of my website to be blurred. This has to be dynamic, meaning that if the user scrolls the content that gets under the navbar gets blurred. You can view the effect on the Apple homepage, with their navbar.

Here's what I've tried so far:

.div {
   filter: blur(10px);
}
<div>
   -code of navbar-
</div>

However, this resulted in the navbar being blurred, not what is beneath the navbar.

Is this even possible with pure CSS?

See the thing is, you *need* to show your effort. A [mcve] is often the best way so that we know what you're working with, what you've tried, and where you got stuck. What you have now is too broad and ambiguous. — j08691, Jan 22 '19 at 17:01
@ValentinWalter see my updated answer. Also, be mindful that all the answers here were factually correct, but they can't write the code for you. You needed to do a little more research before asking the question. Hope it helps you in asking better questions next time. Till then, have fun exploring css filters! — kumarharsh, Jan 23 '19 at 11:22

score 2 · Answer 1 · answered Jan 22 '19 at 17:05

Use this to make background Blur:-

<style>
    .mydiv {
        //Set Blur value
        filter: blur(2px);
    }
</style>
<body>
    <!--Path of Image and its width and height-->
    <div style="background-image:url('ascii.png');width:1440px;height:900px;" class="mydiv">
   </div>
</body>

Hope This will Help!!!

kumarharsh · Answer 2 · 2019-01-23T11:19:44.797

1

Yes. Use the filter property. Browser support is still a little spotty though.

Update: @ValentinWalter you need to use another element to hold the image, and blur that. The filters operate on the dom elements, so if you apply it on the navbar, the whole navbar will be blurred. Also, remember that blur has an associated cost - the more you blur the image, the more the computers' processing will be taxed.

That being said, here is a small example of what you should do: https://codesandbox.io/s/8lmw5j2qq8

Essentially, apply the blur to an absolutely positioned element inside the navbar.

.navbar {
  position: relative;
  overflow: hidden;
}
.blur {
  filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
}
<div class="navbar">
  <div class="blur"></div>
  ...
</div>

edited Jan 23 '19 at 11:19

answered Jan 22 '19 at 16:55

kumarharsh

18,961
8
72
100

Thanks for taking time to answer. Looks like this will solve my problem. I have one question though: can this be dynamic, so that when scrolling the things that get under the navbar get blurred? – Valentin Jan 23 '19 at 11:27
1

Haha, I knew that's what you really wanted. Unfortunately, no. There is no easy way to do this *in HTML/JS* unless you render your **whole** app inside a javascript canvas - but then you will run into even worse problems like managing layout yourself, etc. – kumarharsh Jan 23 '19 at 13:08

score 1 · Answer 3 · answered Jan 22 '19 at 16:56

1

Try

.mydiv {
  filter: blur(2px);
  font-size: 40px;
}

<div class="mydiv">
xyz
</div>

answered Jan 22 '19 at 16:56

Kamil Kiełczewski

85,173
29
368
345

Is it possible to get a background blur effect with pure CSS?

3 Answers3