css的blur,CSS Blur Filter Performance

I'm creating a website that has an ::after element with a backgound and a CSS3 blur applied. I've noticed that applying the CSS3 blur has a huge detrimental effect on performance.

With CSS3 blur applied, there is about a 10 - 20 frames/second drop (from 60fps).

The reason I used CSS3 filters to apply a blur was because this is generic code applied to images that I want blurred, ie, I don't want to use an image editor to blur the images manually.

.blur::after {

background-image:url(dog.png);

filter:blur(3px);

}

So, my question is, are there alternatives to using filter: to blur an element and its background that have better performance without using an image editor?

ps,

I don't mind using javascript, jquery, css, or html elements.