Как размыть края изображения?

Question

У меня есть много изображений, у которых, по дизайну, должно быть автоматическое размытие по краям.

Но из реализаций у меня на уме только blur, который размывает всё изображение.

Какие есть варианты, которые смогут размыть именно края изображения?

Answer 1

Как вариант:

<svg height="320" width="320" viewbox="-10,-10,320,320">
  <defs>
    <filter id="blur5"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter>
    <filter id="blur4"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter>
    <filter id="blur3"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/></filter>
    <filter id="blur2"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter>
    <filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter>
    <mask id="mask10"><rect x="10" y="10" width="280" height="280" fill="white"/></mask>
    <mask id="mask20"><rect x="20" y="20" width="260" height="260" fill="white"/></mask>
    <mask id="mask30"><rect x="30" y="30" width="240" height="240" fill="white"/></mask>
    <mask id="mask40"><rect x="40" y="40" width="220" height="220" fill="white"/></mask>
    <mask id="mask50"><rect x="50" y="50" width="200" height="200" fill="white"/></mask>
    <image id="img" width="300" height="300" 
           xlink:href="https://picsum.photos/id/1/300/300"/>
  </defs>
  
  
  <use xlink:href="#img"                     filter="url(#blur5)"/>    
  <use xlink:href="#img" mask="url(#mask10)" filter="url(#blur4)"/>    
  <use xlink:href="#img" mask="url(#mask20)" filter="url(#blur3)"/>    
  <use xlink:href="#img" mask="url(#mask30)" filter="url(#blur2)"/>    
  <use xlink:href="#img" mask="url(#mask40)" filter="url(#blur1)"/>    
  <use xlink:href="#img" mask="url(#mask50)"/>
</svg>

Answer 2

А как на счет CSS box-shadow:

<html>

<head>
  <title>Untitled</title>
  <style>
    #shadow {
      width: 128px;
      height: 128px;
      border-radius: 40px;
      background: url(https://lh3.googleusercontent.com/a-/AAuE7mDsMtcQmcp8fiJm701iSvaSNc0gMCe1S5jJHT9I=k-s128);
      box-shadow: inset 0 0 25px rgba(101, 114, 126, 50), inset 0 0 25px rgba(140, 150, 170, 50), inset 0 0 25px rgb(83, 94, 104), inset 0 0 25px rgb(86, 96, 106);
    }
  </style>
</head>

<body>
  <div style="float: left"><img id="shadow"></div>
</body>

</html>

БЛОГ НА HUSL

Как размыть края изображения?

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