Blur video background

Question

I have to add blur effect with a smooth transition to bottom part of video background. I mean I don't need a sharp transition like this <https://codepen.io/shabspb/pen/eYVNzem>, but i need a smooth transition.

I read a lot of information on stack overflow, but couldn't find appropriate answer.

Answer 1

Try giving the blur element a mask-image such as:

mask-image: linear-gradient(transparent, white 50%, white);

video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}
.video-wrapper {
  border: 2px solid #000;
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); 
}

.blur.soft {
  mask-image: linear-gradient(transparent, white 50%, white);
  -webkit-mask-image: linear-gradient(transparent, white 50%, white);
}

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class='blur'></div>
</div>

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class='blur soft'></div>
</div>