<h1>Original</h1> <img width="200" height="200" src="https://avatars3.githubusercontent.com/u/5305599"> <h1>Blur boundaries</h1> <figure class="container"> <img class="image" src="https://avatars3.githubusercontent.com/u/5305599"> </figure>
body { color: white; background-color: gray; } .container { position: relative; width: 200px; height: 200px; } .container::after { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 15px 15px gray; } .image { width: 100%; height: 100%; }