How can I apply a gradual blur to a background image (so that a text overlay is easily readable)?

Ryan Published at Dev

Ryan

I have a large photo, such as http://www.bestwallpapersfan.com/wp-content/uploads/2014/05/1755137.jpg. I want to overlay text near its bottom.

To ensure that the text is readable, I want to use the Floor Blur approach described here: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96#dc39-765a9789c924

I've learned how to do a simple Floor Fade to Black or a simple blur (both described here: https://css-tricks.com/design-considerations-text-images/).

But how do I combine the effects such that it's a gradual / gradient / progressive blur?

Thanks!

Ryan

This is pretty close to what I was looking for and now just needs to be cleaned up to fix the funkiness with the h1, etc.

.container {
  width: 400px;
  height: 300px;
  position: relative;
}

.gradient {
  position: absolute;
  width: 400px;
  height: 300px;
  margin: 20px;
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  opacity: 0.99;
  z-index: 2;
}

.module {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  width: 400px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  margin: 20px;
  z-index: 1;
}

.module>header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  z-index: 3;
}

.module>header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(12px);
  filter: blur(12px);
  transform: scale(2) translateY(20px);
}

.module>header>h1 {
  margin: 0;
  color: white;
  position: relative;
  z-index: 4;
}

.title {
  margin: 0;
  color: white;
  position: absolute;
  z-index: 4;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="gradient">
  </div>
  <div class="module">
    <header>
      <h1>
        Skyscraper
      </h1>
    </header>
  </div>
  <div class="title">
    Skyscraper
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.