Html - How can I make a smooth blur?

Vector
December 30, 2023
142 views
2 votes
3 Answers

How can I make a smooth blur as smooth as a gradient from transparent to dark?

.img {
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: relative;
}

.img .shadow {
  content: "";
  height: 150px;
  bottom: 0;
  width: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
  background: linear-gradient( 360deg, rgb(0 0 0 / 100%) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(10px);
}

<div class="img">
  <div class="shadow"></div>
</div>

Tags: css html

Answers

You could look at layering multiple elements over each other. The first layer is the tallest, least blurred, such that its blur is less discernible with the original image. We can then layer more elements on top that increase in blur but are shorter, so that the stronger blur works its way down the image. We "blend" the layers together with the mask.

Of course, adjust parameters to taste:

.img {
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: relative;
}

.img .shadow {
  content: "";
  height: calc(150px * var(--n) / 4);
  bottom: 0;
  width: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
  background: linear-gradient( 360deg, rgb(0 0 0 / 75%) 0%, rgba(255, 255, 255, 0) 150px);
  -webkit-mask: linear-gradient(0deg, #000, #0000);
  mask: linear-gradient(0deg, #000, #0000);
  backdrop-filter: blur(calc(10px / var(--n)));
}

.shadow:nth-child(1) {
  --n: 4;
}

.shadow:nth-child(2) {
  --n: 3;
}

.shadow:nth-child(3) {
  --n: 2;
}

.shadow:nth-child(4) {
  --n: 1;
}

<div class="img">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

Combine mask with background

.img {
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  height: 200px;
  inset: auto 0 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#0000, #000 90%);
  background: linear-gradient(#0000, #0005 70%,#000);
  backdrop-filter: blur(10px);
}

<div class="img">
</div>

You can use mask (in the code snippet, for removing the blur filter, hover on the image):

img {
  width: 800px;
  height: 450px;
  position: absolute;
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-repeat: no-repeat;
}

.linear-filter-top-to-bottom {
  -webkit-mask: -webkit-linear-gradient(black, transparent 100%, black);
  -webkit-mask: linear-gradient(black, transparent 100%, black);
  -webkit-filter: blur(24px);
  mask: url("#linear-mask");
  filter: url("#filter");
}
.linear-filter-top-to-bottom:hover {
  mask: none;
  filter: none;
  -webkit-mask: none;
  -webkit-filter: none;
}
.filter-border {
  width: 800px;
  height: 450px;
}

.container {
  width: 800px;
  height: 450px;
}

    <div class="container">
      <div>
        <img class="img-src" />
        <img class="linear-filter-top-to-bottom img-src" />
      </div>
      <svg height="0">
        <defs>
          <mask id="linear-mask">
            <rect class="filter-border" 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="40%" />
              <stop stop-color="white" offset="100%" />
            </linearGradient>
          </mask>
          <filter id="filter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
          </filter>
        </defs>
      </svg>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I make a smooth blur?

Answers