A blurred overlay

A blurred overlay.markdown

A blurred overlay

... mask or whatever that is responsive and could be cross-browser compatible back to IE9

A Pen by Glenn Reyes on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

<div class="container">
  <div class="overlay">
    <h1>A blurred overlay</h1>
    <p>... mask or whatever<br>that is responsive and could be cross-browser compatible back to IE9</p>
  </div>
</div>

style.css

html, body, .container {
  width: 100%;
  height: 100%;
}

.container,
.overlay:before {
  background: url(https://unsplash.it/1920/1080/?random) no-repeat fixed 0 0 / cover;
}


.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.overlay {
  max-height: 200px;
  margin: 0 auto;
  max-width: 768px;
  overflow: hidden;
  padding: 50px;
  position: relative;
  color: white;
  font-family: 'Lato';
  position: relative;
  text-align: center;
  z-index: 0;
  &:before {
    content: '';
    filter: blur(20px);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
}

for .overlay::before you could set "140%" for width and height and "-20%" for top and left properties, and get a strong effect near the edges

(https://cloud.githubusercontent.com/assets/1678210/10057029/95eefd34-6214-11e5-8552-bd8cd8587525.png)