How to achieve a Progressive Blur using SVG by combining a filter with a mask?

I'm trying to achieve a linear blur effect like the one on the image, but using just svg, no css!!!

Notice how the top of the image is completely blurred, but the bottom isn't.

In SVG Blur effect can be achieved using feGaussianBlur. The gradient can be used with linearGradient.

How can these two be combined?