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

174

09 апреля 2022, 01:30

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

Но из реализаций у меня на уме только 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>