CSS blur overlay

Sep 20, 2016 CSS SVG

Unfortunately it is not possible to create a real blur overlay with CSS for all browsers at the moment. Only webkit has the backdrop-filter. But all other browsers mostly support a blur filter. This will not really work like a overlay, more like a filter that will be propagated bottom-up. In other words, the filter works only for a hole element or not. It's impossible to have something like a div overlay element that blurs only a part of an image like the backdrop-filter.

SVG filter

As mentioned above we have to use a filter. For example feGaussianBlur. Here a short example with the used CSS.

<style>
    .blur {
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
        -webkit-filter: url(#blur-filter);
        filter: url(#blur-filter);
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
    .blur-svg {
        display: none;
    }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
    <defs>
        <filter id="blur-filter">
            <feGaussianBlur stdDeviation="3"></feGaussianBlur>
        </filter>
    </defs>
</svg>
<div class="blur">
    <h3>Example</h3>
    <p>This example shows the effect.</p>
</div>

Performance issues

Do never overuse this effect. Some browser, especially mobile browser lose their smooth scrolling if too many elements have applied blur filters.