Can You CSS Blur Based on a Gradient Mask

.effet{

  width: 400px; height: 300px;

  margin: 0 auto 50px auto;

  box-shadow: 0 1px 5px rgba(0,0,0,.5);

}

.effet img{

  position: absolute;

}

.filtre--r{

  -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);

  -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);

  -webkit-filter: blur(5px);

  mask: url('#mask-radial');

  filter: url('#filtre1');

}

.filtre--l{

  -webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);

  -webkit-mask: linear-gradient(black, transparent 30%, black);

  -webkit-filter: blur(3px);

  mask: url('#mask-linear');

  filter: url('#filtre2');

}

.filtre:hover{

   -webkit-mask: none;

   -webkit-filter: none;

   mask: none;

   filter: none;

}

p{

   text-align: center;

   color: rgba(0,0,0,.6);

   margin: 1em;

}

p a{

  color: rgba(0,0,0,.6);

}

<p><strong>Radial</strong> progressive blur</p>

<div class="effet">

  <img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="Sample Image" />

<img class="filtre filtre--r" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="Sample Image" />

</div>

<p><strong>Linear</strong> progressive blur</p>

<div class="effet">

<img src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="Sample Image" />

<img class="filtre filtre--l" src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="Sample Image" />

</div>

<p>Hover over images to see without blur</p>

<p>Next demo: <a href="http://codepen.io/iamvdo/pen/djEBu" target="_blank">iOS 7 background blur with CSS</a></p>

<svg height="0">

<defs>

  <mask id="mask-radial">

    <rect width="400" height="300" fill="url(#g1)"></rect>

    <radialGradient id="g1" cx="50%" cy="50%" r="50%">

      <stop stop-color="black" offset="50%"/>

      <stop stop-color="white" offset="110%"/>

    </radialGradient>

  </mask>

  <mask id="mask-linear">

    <rect width="400" height="300" fill="url(#l1)"></rect>

    <linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">

      <stop stop-color="white" offset="0%"/>

      <stop stop-color="black" offset="30%"/>

      <stop stop-color="white" offset="100%"/>

    </linearGradient>

  </mask>

  <filter id="filtre1">

    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>

  </filter>

  <filter id="filtre2">

    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>

  </filter>

</defs>

</svg>

How to add a backdrop blur filter as a gradient

I was able to solve this by adding a mask to the div.

  -webkit-mask: -webkit-gradient(
    linear,
    left 45%,
    left 0%,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
  );

Thanks to Temani Afif for the suggestion.

Add blur with CSS radial gradient

You can use backdrop filter combined with mask:

.focus {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  -webkit-mask: radial-gradient(circle, #0000 150px, rgba(0, 0, 0, 0.9) 160px);
  backdrop-filter:blur(10px);
}

body  {
  background:url(https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80) center/cover;
}

<div class="focus">

</div>

Using CSS, can you apply a gradient mask to fade to the background over text?

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

(The new standardised way of doing it is would use mask-image and linear-gradient using its new syntax. See caniuse.com for mask-image and linear-gradient.)

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 50% to make sure that content is only faded when there is more to scroll to.

Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet... Use mask-image in Firefox now.

How to apply gradient blur to one side of an image?

Actually, it is possible to get a fairly similar result with CSS.
More detailed: codepen

.effet {
  width: 400px;
  height: 300px;
  margin: 0 auto 50px auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.effet img {
  position: absolute;
}
.filtre--r {
  -webkit-mask: -webkit-radial-gradient(
    center,
    closest-side,
    transparent 30%,
    black 80%
  );
  -webkit-mask: radial-gradient(
    closest-side at center,
    transparent 50%,
    black 110%
  );
  -webkit-filter: blur(5px);
  mask: url("#mask-radial");
  filter: url("#filtre1");
}
.filtre:hover {
  -webkit-mask: none;
  -webkit-filter: none;
  mask: none;
  filter: none;
}

<div class="effet">
  <img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="Sample Image" />
  <img class="filtre filtre--r" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="Sample Image" />
</div>

<svg height="0">
  <filter id="filtre1">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
</svg>

Linear progressive blur on an image

Try this:

figure {
      position: relative;
    }
    figure::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
    }

<figure>
    <img width="50%" src="https://placekitten.com/640/360" alt="Sample Image">
  </figure>

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

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>

---

Related Topics