How to blur the background of an element?

Question

css

The bottom line is that there is an element (let's say, with text or a portfolio, it doesn't matter). There is a picture against its background, and it is necessary that one of its upper edges smoothly merge with the background of the page itself.
The picture is not particularly complicated, this very top edge is rather monochromatic, but with overflows on the sides, it catches the eye.
How to do it?

Answer 1

You can make 2 layers with a picture, the bottom layer (positioned under the first) is blurred using filter: blur();
Example: https://codepen.io/anon/pen/aqqoXd
The blur radius can be increased by stretching the bottom layer: https://codepen.io/anon /pen/oEENjw

Answer 2

May
https://jsfiddle.net/Politonius/epLua0rv/15/