Full Page Blur in CSS

Blur the whole page except a div

You should use not for this.

If you use .container div:not(.center) your problem should be solved.

.container div:not(.center){  width:100%;  height:100%;  min-height:400px;  position:relative;  filter: blur(0.5rem);  z-index:1;}.text{  width:50%;}.center{  width:200px;  height:200px;  position:absolute;  top: 50%;  left:50%;  transform:translate(-50%, -50%);  background:#f00;  z-index:10;  filter: blur(0);  filter: none;}

<div class="container">    <div class="title">      <h1>        some text      </h1>    </div>    <div class="text">      <p>        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...      </p>    </div>    <div class="center"></div></div>

Blur effect on the entire webpage

Here's some results, if by blur you mean fuzziness:

This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:

http://jsfiddle.net/9qnsz/2/

This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:

Gaussian Blur onHover Using jQuery

EDIT: As requested, the contents of the jsfiddle:

<div class="container">
    <div class="overlay">
        <p>Please register etc etc...</p>
    </div>

    <form action="javascript:;" class="form0">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form1">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form2">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form3">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form4">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>

</div>


.container {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #CCC;
}
    form {
        position:absolute;
        left:10px;
        top:10px;
    }
    form.form0 {
        left:11px;
        top:11px;
        opacity:0.1;
    }
    form.form1 {
        left:8px;
        top:8px;
        opacity:0.1;
        zoom:1.02;
    }
    form.form2 {
        left:11px;
        top:11px;
        opacity:0.1;
        zoom:1.01;
    }
    form.form3 {
        left:9px;
        top:9px;
        opacity:0.2;
    }
    form.form4 {
        left:11px;
        top:11px;
        opacity:0.1;
    }

    .overlay {
        width:250px;
        height:250px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #666;
    }

How do I make the background image for my page blurry without affecting any of the other content on the page?

After body, you need to add a<div>tag with the css property:backdrop-filter: blur (1px);before the rest of the page.

Here's an example:

body {
  margin: 0;
  padding: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
  color: #fff;
  width: 100%
}

main {
  width: 50%;
  border: 5px solid red;
}

#amazing__filter{
  backdrop-filter: blur(4px);
  background: #ffffff20;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
footer {
  width: 100%;
  height: 40px;
}

<html>
  <head>
  </head>
  
  <body>
    <div id="amazing__filter">
      <main>
       <header>
        <h1>
         A spectacular solution to the problem
       </h1>
      </header>
       <h2>
         List of the same words to fill the page
       </h2>
       <ol>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
        </ol>
      </main>
      <aside>
      </aside>
      <footer>
       <p>Footer</p>
      </footer>
    </div>
  </body>
</html>

How can I blur everything around an element with CSS?

A backdrop-filter solved this issue, thank you @Sheraff and @epascarello 23

Sample Image

Blur Filter for full page navigation

You could target as well from your script the main content to blur :

$('.nav').hide();$('.hamburger').click(function(){    $('.nav').fadeToggle('slow');    $('.hamburger div').toggleClass('turn-white');    $('.example-content').toggleClass('blur');});$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){    $('.nav').fadeToggle('slow');    $('body').toggleClass('disable-scroll');});

.nav{    height:100vh;    width:100%;    position:fixed;    z-index:5;    display:none;    text-align:right;}#nav_bg {    height:100%;    width:100%;    position:absolute;    z-index:100;    background-color:rgba(0,0,0,0.5);}.blur{
    filter: blur(5px);}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="hamburger">Menu Button</button>
<div class="nav">        <div id="nav_bg"></div>        <ul class="navigation">            <li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span>                <ul class="nav-dropdown">                    <li><a>Business Packages</a></li>                    <li><a>Top Producers</a></li>                      <li><a>Video Ads</a></li>                      <li><a>Proud Community Sponsor</a></li>                  </ul>            </li>            <li><a href="#campaigns">Campaign Options</a></li>            <li><a href="#">Contact</a></li>            <li><a href="#">Log In</a></li>            <li>                <a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a>                <a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a>                <a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a>            </li>        </ul>    </div>
<div class="example-content"><h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>   <h3>THIS SHOULD BE BLURRED</h3>

Getting a full-screen HTML5 Video Background Blur to work?

You might want to make that video bigger than the parent and center it inside it, I think that would get rid of that white blur inside the borders of the parent.

@Ashugeo, I took your code and did what you suggested years ago and it seems to work.

Unfortunately, this doesn't seem to work. I also tried making the video even bigger and centering it, still doesn't seem to work.

@Finn C, Nowadays it seems to work using transform:
https://jsfiddle.net/Erik_J/6f483wm9/

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

body{ margin:0;}

#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
#videobcg {
    width: inherit;
    height: inherit;
    -o-filter: blur(15px);
    filter: blur(15px);
    object-fit: cover;
    transform: scale(1.04);
}