Linear progressive blur on an image

Question

I am trying to linearly and progressively blur out an image. I have not found any resources on this online at all, or perhaps I just have no idea what to search for. Could someone provide me with a similar resource or search term so that I can find the tutorials or templates for this if it exists?

Picture for illustration:

Any help would be appreciated, thank you!

score 1 · Accepted Answer · edited Nov 15 '21 at 15:14

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="">
  </figure>

And you can change the alpha channel in the white color as you need.

MushroomFX · Answer 2 · 2021-11-15T11:09:16.903

You could use a gradient that goes from transparent to white like this:

    #fade {
      transform: translate(0, -100px);
      position: absolute;
      width: 100%;
      height: 100px;
      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }

    <body>
    
      <h1>Headline</h1>
      <div id="text">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <div id="fade"></div>
        <h1>Next things</h1>
      </div>
    </body>

Linear progressive blur on an image

2 Answers2