Is there a way to blur the background but not the text

Question

Does anyone know how to blur the background, but allow for the text and buttons to be kept not blurred Also this is a small cover on the background, Not the background so a simple <p> after the code wont work

.middlecoversecond{
  margin-left: 0%;
  margin-right: 0%;
  height: 550px;
  position: center;
  background-color: #dddddd;  
  border-style: solid; 
  border-width: 3px; 
  filter: blur(10px);
}

<div class="middlecoversecond">
  <h1>More Stuff2</h1>
  <p> Other of this</p>
</div>

There is a very cool `backdrop-filter` which is still in draft (part of CSS Filter Effects Module 2 Editor's Draft), hence very limited support at this stage. See [CSS Tricks: backdrop-filter](https://css-tricks.com/almanac/properties/b/backdrop-filter/). So at the moment, to have something work on most modern browsers, you'll need to create a separate element with the blurred background. — Frank Fajardo, Apr 12 '20 at 04:57

score 0 · Answer 1 · answered Apr 12 '20 at 04:37

0

Put yours styles to another div and set width and height 100% to the div parent I hope it helps you

<div>
<div class="backgroundblurinpositionabsolute"></div>
<h1>More Stuff2</h1>
<p> Other of this</p>
</div>

answered Apr 12 '20 at 04:37

Pedro Buelna

1
1

score 0 · Answer 2 · answered Apr 12 '20 at 04:42

You can try this. But I am not sure what your expected outcome is. I think creating another <div> outside of <div class="middlecoversecond"> and blurring it while keeping <div class="middlecoversecond"> unblurred is another workaround.

.middlecoversecond{
  margin-left: 0%;
  margin-right: 0%;
  height: 550px;
  position: center;
  position: relative;
  z-index: 1;
}

.blurred
{
  z-index: 0;
  border-style: solid; 
  border-width: 3px; 
  background-color: #dddddd;  
  width: 100%;
  height: 100%;
  filter: blur(10px);
  position: absolute;
}

<div class="blurred"></div>
<div class="middlecoversecond">
  <h1>More Stuff2</h1>
  <p> Other of this</p>
</div>

Is there a way to blur the background but not the text

2 Answers2