2

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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Daniel Alsaker
  • 193
  • 3
  • 15
  • There are loads of examples for this - http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image – Mx. Mar 02 '16 at 13:15
  • Her is a similar post what might help you out. http://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element – Timo Mar 02 '16 at 13:16
  • 1
    @Mx. That is not what my question is about. There he want an image blurred, and it does only work when an image is involved. I specifically asked how to do this without having to use an image. – Daniel Alsaker Mar 02 '16 at 13:45

4 Answers4

3

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • I was not being specific enough about my question back then. This basically did what I asked for in the question, but I also wanted it to blur everything behind the blurred element. I luckily found out a solution myself back then :P - I'm just editing the question now to be more specific for other users maybe wanting something similar, and thought I'd put it out there that your answer was a good one~ – Daniel Alsaker Mar 05 '17 at 19:59
  • I haven't tried this but it was the answer I thought would work so was looking for this tio see if I was right. I'm sure this is the best way to do it. – Rick Kukiela Oct 22 '21 at 05:24
2

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);
}
Ryan O'Connor
  • 152
  • 2
  • 10
  • No I have not heard of that. It sounds very smart and simple though! I am using sadly using Chrome so I am going to try and find another solution. I hope that they add this to Chrome and Firefox soon! – Daniel Alsaker Mar 02 '16 at 14:04
  • 1
    Yeah. I'm waiting until they add more support for this feature but just thought that you may want to use it when they do add support. – Ryan O'Connor Mar 02 '16 at 14:05
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.

Fazil Abdulkhadar
  • 1,091
  • 5
  • 11
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.

Raja Sekar
  • 2,062
  • 16
  • 23