CSS blur only in one direction (motion blur)

Question

I need to dynamically blur an image on my page, but only along one axis (Y specifically). So here are my requirements:

• Has to be done "live" (I can't pre-render a blurred version of the image)
• Like I said, only on the Y axis (like a motion blur, but vertical)
• Needs to animate in
• Should work in IE9+

My first thought was to use a simple CSS filter:

img {
    filter: blur(20px);
}

I can animate that by adding a transition (transition: filter 0.2s linear), but it only creates Gaussian blurs, which isn't the effect I want. The syntax doesn't support something like filter: blur(0 10px); to restrict the blur only to one axis.

Then I read that the blur filter (amongst others) is really just a shorthand for an SVG filter, which you can write manually if you want. So I created an SVG called filter.svg that specifies a 20px blur only along the Y axis (0 20):

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0 20" />
        </filter>
    </defs>
</svg>

And applied it like this:

img {
    filter: url("filter.svg#blur");
}

And that works perfectly...but only in Firefox. Safari/Chrome don't support url() as a value for filter. Plus, I can't animate it because the value is a URL rather than a number, so transition doesn't work.

On top of all that, I don't think either of these approaches work in IE9.

So: is there any way to do what I'm trying to do? I've looked into using canvas as an alternative, but can't find any examples of a blur that only goes in one direction.

Answer 1

.vblur {
  filter: url(#blur);
}

<svg width="1" height="1">
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0 20" />
        </filter>
    </defs>
</svg>
<div class="vblur">
<img src="https://www.google.com/chrome/static/images/chrome-logo-m100.svg">
scrollin
</div>

Embed the SVG in the same HTML page. I'm seeing online that this is allowed https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction.

I don't know if Chrome et al.'s restriction to URL filters from the same page is documented anywhere though.