How can I create a motion-blur effect with CSS?

I've got this working nicely on objects with a solid background colour, by applying multiple box-shadows:

jsFiddle

html:

<div></div>

css:

div{width: 50px;
    height: 50px;
    margin: 100px;
    border-radius: 25px;
    background: rgb(0,150,0);
    box-shadow: -15px 0 12px rgba(0,150,0,0.2)
              , -11px 0 10px rgba(0,150,0,0.4)
              ,  -8px 0  8px rgba(0,150,0,0.6)
              ,  -6px 0  6px rgba(0,150,0,0.8)}

This isn't ideal as you get shadow bleeding up and down from the element instead of just to the left, but it kinda does the job.

But what I really want is for it to work nicely with a background image, e.g. in this jsFiddle I'd like the colours on the edge of the div (or the edge of the background image at least) to be stretched out.

How can I do that? Can I?

Thank you

You could add a ::before then duplicate your element and blur it.

div{
  position: relative;
  width: 50px;
        height: 50px;
        margin: 100px;
        border-radius: 25px;
        background: url(https://i.imgur.com/pDj7wo9.png);
        background-size: cover;
        background-position: left center;
}

div::before {
    background: url(https://i.imgur.com/pDj7wo9.png);
    background-size: cover;
    background-position: left center;
    position: absolute;
    width: 55px;
    height: 55px;
    overflow: hidden;
    z-index: -1;
    filter: blur(5px);
    content: "";
    border-radius: 100%;
}

<div></div>