как сделать Градиентное Размытие CSS3

Question

Вопрос следующий, как сделать градиентное размытие, чтобы в левом краю картинки размытие было максимальным, а уже в правом его совсем не было. Гуглил, там используют css свойство filter:blur(5px);. А как сделать так, чтобы это было как бы градиентное размытие?

Answer 1

Способ конечно такой себе... В чём суть: над основной картинкой помещается её дубликат с маской градиентной прозрачности и уже дубликату задаётся размытие. Наверняка есть решение получше: на canvas или svg-фильтрах. Я бы дождался их.

.wrapper{
  display: inline-block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.wrapper img{
  display: block;
  width: 100%;
}
.wrapper img:last-child{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-mask: linear-gradient(to right, black, transparent);
  filter: blur(8px)
}

<div class="wrapper">
  <img src="https://im0-tub-ru.yandex.net/i?id=9bbb34caaa11a9b3e546337d18fc223d&n=11" />
  <img src="https://im0-tub-ru.yandex.net/i?id=9bbb34caaa11a9b3e546337d18fc223d&n=11" />
</div>

Answer 2

Маска накрывает всё изображение и при белом цвете white в маске, изображение видно полностью

При черном цвете изображение прорезается, его не видно

Градиент осуществляет переход от белого цвета к чёрному в маске, тем самым заставляя изображение становится менее видимым.

.container {
width:50%;
height:50%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 2800 1800" preserveAspectRatio="xMinYMin meet">  
<defs>
  <mask id="msk" >
     <!-- Маска накрывает всё изображение при белом цвете `white` в маске изображение видно полностью -->
      <!-- При черном цвете изображение прорезается, его не видно -->
   <rect  width="100%" height="100%" fill="url(#Grad)" />
   </mask>
      <!-- Градиент осуществляет переход от чёрного цвета к белому в маске  -->
  <linearGradient id="Grad" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="black" />
        <stop offset="100%" stop-color="white" />
    </linearGradient>   
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/GwaFE.jpg" width="100%" height="100%" />
</svg>   
</div>

Меняя направление градиента можно сделать размытие сверху

linearGradient id="Grad" y1="0%" x2="0%" y2="100%"

<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 2800 1800" preserveAspectRatio="xMinYMin meet">  
<defs>
  <mask id="msk" >
     <!-- Маска накрывает всё изображение при белом цвете `white` в маске изображение видно полностью -->
      <!-- При черном цвете изображение прорезается, его не видно -->
   <rect  width="100%" height="100%" fill="url(#Grad)" />
   </mask>
      <!-- Градиент осуществляет переход от чёрнорго цвета к белому в маске  -->
  <linearGradient id="Grad" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="black" />
        <stop offset="100%" stop-color="white" />
    </linearGradient>   
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/GwaFE.jpg" width="100%" height="100%" />
</svg>   
</div>

Размытие снизу

linearGradient id="Grad" y1="100%" x2="0%" y2="0%"

<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 2800 1800" preserveAspectRatio="xMinYMin meet">  
<defs>
  <mask id="msk" >
     <!-- Маска накрывает всё изображение при белом цвете `white` в маске изображение видно полностью -->
      <!-- При черном цвете изображение прорезается, его не видно -->
   <rect  width="100%" height="100%" fill="url(#Grad)" />
   </mask>
      <!-- Градиент осуществляет переход от чёрного цвета к белому в маске  -->
  <linearGradient id="Grad" y1="100%" x2="0%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="black" />
        <stop offset="100%" stop-color="white" />
    </linearGradient>   
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/GwaFE.jpg" width="100%" height="100%" />
</svg>   
</div>

БЛОГ НА HUSL

как сделать Градиентное Размытие CSS3

Ответы (2 шт):