seo Question posted in
Some basic information to get you started with this can be found here.

How to blur an element and everything behind it, without blurring the text within the element? CSS – SEO

So I am making a site where I want the background of an element to be blurred, While I don’t want the text within the element to get blurred, like it currently does. Is there a way to do this without having to use an image where everything is already done? – for SEO

You can see some of my current code in the snippet below:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 16px;  
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1); 
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

main {
    width: 800px;
    margin: auto;
}

#welcome {
    color: #fff;
    width: 580px;
    margin: 100px auto;
    font-size: 110%;
    border-radius: 25px;
    border: #fff solid 1px;
    margin-top: 50px;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
    position: relative;
}

#welcome p {
    z-index: 999;
    margin: 10px;
}
<body>
    <main role="main">
        <header id="welcome">
            <p>Content in here</p>
        </header>
    </main>
</body>

Update

Okay I solved the problem myself! maybe I was not clear enough in my question.

I wanted to blur the parent to a paragraph(In this case a header tag), without blurring the text withing the paragraph. So that all elements behind the blurred parent(header) would get blurred as well – in this case a background image. I figured out how to make this work myself, see how in the snippet below:

Important notice: The background image has to be the closest parent to the blurred element(Here the body is parent to the header), otherwise the blur effect won’t work.

body {
    background: url('https://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg') fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
}
 header {
    border-radius: 25px;
    position: relative;
    margin: 100px auto;
    width: 500px;
    background: inherit;
    overflow: hidden;
}
 header::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
 header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25)
}
 header h1, p {
    margin: 20px 10px;
    color: #fff;
    position: relative;
    z-index: 1;
}
<body>
    <header>
        <h1>
            Whoo it's working!
        </h1>
        <p>this is also blurring the background</p>
    </header>
</body>
Tags:

4

Answers


  1. 0

    Place a div where you want the blur effect and add filter:blur to the div class.

    .class {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10'
}

    Please see the demo here

    Filters are the css3 level property and work only in modern browsers.

    Login or Signup to reply.
  2. 0

    filter works like opacity it affect the element and any children. So, use a ::before pseudo-element and apply the blur to that.

    JSfiddle Demo

    html,
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .1);
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
main {
  width: 800px;
  margin: auto;
}
article {
  color: #fff;
  width: 580px;
  margin: 100px auto;
}
#welcome {
  font-size: 110%;
  border-radius: 25px;
  border: #fff solid 1px;
  margin-top: 50px;
  position: relative;
}
#welcome::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .2);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
#welcome p {
  z-index: 999;
  margin: 10px;
}
    <main role="main">
  <article>
    <section id="welcome">
      <p>Content in here</p>
    </section>
  </article>
</main>
    Login or Signup to reply.
  3. 0 
    .class{
 background: rgb(0,0,0) // fallback for ie8 and lower end browser
 background: rgba(0,0,0,0.5) //0.5 is the opacity value
}

    This is the right way to solve your problem, but you have to use rbg value instead of hexcode.

    Login or Signup to reply.
  4. 0

    Not sure if you know about backdrop filter but it allows you to apply effects to anything behind a div and they are working on adding support to Chrome and Firefox but it is currently only supported by Safari. Here’s the code anyway as I’m not sure when it will be supported.

    #welcome {
    font-size: 110%;
    border-radius: 25px;
    border: #fff solid 1px;
    margin-top: 50px;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
    -o-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search