Css blur Make background content less visable

user_2524749 0
Viewed 71

I'm trying to create a CSS overlay using the blur filter. 

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur');
  filter: blur(5px);
}
<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>

I created an example in this codepen:

https://codepen.io/hetzbr/pen/zJLEaz

When I have a white button as content it's very prominent and difficult to read any content that's overlayed on the blur.

Is there a way that I can make the content colors less prominent?

I know that I can add opacity to the content to make the background content less visible, but curious if there's a way that the text can still have a nice blur effect without the buttons sticking out like a sore thumb.

blur overlay css html
2 Answers

You could add a brightness(50%); filter in addition to your blur to darken the blurred element, thus creating a bit more contrast with the white text.

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur') brightness(50%);
  filter: blur(5px) brightness(50%);
}
<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>

user_20266060

You could add an opacity to the buttons only. That way you'd still have the correct colors on the container, but the buttons would stand out less.

In your CodePen, I added opacity: .5 do your button and that seemed to do the trick.

Your example with lower-opacity buttons

user_103874140
Related