What is the technique to achieve a seamless blur effect?

Question

What is the technique to achieve a seamless blur effect?

Is there a way to create a smooth blur similar to a gradient transitioning 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>

html css

Answer 1

Answer №1

Mixing mask and background

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

.image: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="image">
</div>

Answer 2

Mixing mask and background

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

.image: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="image">
</div>

Answer 3

Answer №2

To achieve a layered effect, consider stacking multiple elements on top of each other. Start with the tallest and least blurred layer to minimize the visibility of the blur against the original image. Subsequent layers can be progressively shorter and more blurred, creating a cascading blur effect. The layers can then be seamlessly blended together using a mask.

Feel free to customize the parameters based on your preferences:

.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>

Answer 4

To achieve a layered effect, consider stacking multiple elements on top of each other. Start with the tallest and least blurred layer to minimize the visibility of the blur against the original image. Subsequent layers can be progressively shorter and more blurred, creating a cascading blur effect. The layers can then be seamlessly blended together using a mask.

Feel free to customize the parameters based on your preferences:

.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>

Answer 5

Answer №3

To eliminate the blur filter, you can utilize the mask property (in this code snippet, simply hover over the image):

.image {
  width: 800px;
  height: 450px;
  position: absolute;
  background: url(https://example.com/image.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="image" />
    <img class="linear-filter-top-to-bottom image" />
  </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>

Answer 6

To eliminate the blur filter, you can utilize the mask property (in this code snippet, simply hover over the image):

.image {
  width: 800px;
  height: 450px;
  position: absolute;
  background: url(https://example.com/image.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="image" />
    <img class="linear-filter-top-to-bottom image" />
  </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>

Answer 7

Answer №4

What do you think of this?

I'm not entirely sure if I've grasped your question correctly.

Try hovering over it to see the difference it makes.

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

.shadow {
  height: 150px;
  bottom: 0;
  width: 100%;
  position: absolute;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(transparent, black 80%);
  
  border-right: 1px solid white;
  transition: .5s ease-in-out;
}

.img:hover .shadow {
  width: 0%;
}

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

Answer 8

What do you think of this?

I'm not entirely sure if I've grasped your question correctly.

Try hovering over it to see the difference it makes.

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

.shadow {
  height: 150px;
  bottom: 0;
  width: 100%;
  position: absolute;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(transparent, black 80%);
  
  border-right: 1px solid white;
  transition: .5s ease-in-out;
}

.img:hover .shadow {
  width: 0%;
}

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

What is the technique to achieve a seamless blur effect?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Running PHP code within an HTML file served by PHP

Sending a tailored query string through a form

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Select and activate a single input from multiple options in Angular

Mastering the alignment of tab content on Bootstrap 5 to ensure it always displays on the right side

"What is the best approach to adjusting the width of one div based on the width of another div using CSS Grid

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

What is the most effective method for customizing non-MUI elements within an MUI framework?

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Submitting the form with a target of _blank will result in the form being submitted on both a

Having difficulty configuring Compass in WebStorm

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

Display an echo within a DIV

Adjusting the text and background hues using JavaScript results in an immediate reversal

fancybox thumbs will never function properly

What is the best way to replicate a div's background color using an image within the body element?

Support for Arabic in database, PHP, and JavaScript

Adjust Element Width Based on Scroll Position

What is the best method for centering text input within an Angular Material toolbar?

Is it feasible to embed an entire linked CSS file within Jade?