Понадобилось мне как-то сверстать такой эффект: картинка «светится» и подсвечивает фон под собой. Каждая картинка своими цветами. В графическом редакторе свечение — это дубликат картинки с применением размытия по Гауссу в несколько десятков пикселей.

Сначала была мысль сделать размытие, используя canvas. Но, как оказалось, проще сделать это без канваса и яваскрипта через SVG-фильтры. CSS-фильтры от Adobe ещё не слишком распространены: работают с префиксом только в webkit. У SVG-фильтров поддержка намного шире — все современные браузеры, кроме Safari 5.1 и Андроид браузера. А в IE уже начиная с версии 5.5 есть старые добрые фильтры (те самые, с длинным названием filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=70);), которые, тем не менее, прекрасно справляются с задачей.

Demo

Рассмотрим, как это работает.

Под картинкой спозиционируем SVG-файл:

<svg class="bg-blur">
    <defs>
        <filter id="blur" x="-200%" y="-200%" width="400%" height="400%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="70" />
        </filter>
    </defs>

    <image x="150" y="150" id="svg-image" width="280" height="280" xlink:href="http://pcdn.500px.net/27549003/d409bce305cd0f77f3b12d124f69c7a3659bfaea/3.jpg" filter="url(#blur)"/>

</svg>

Размеры и позиция SVG задаются в CSS через класс bg-blur.

Внутри тегом image мы помещаем нашу картинку. Левый верхний угол имеет координаты x="150" y="150", чтобы дать место свечению.

Изображению назначен фильтр #blur, который определен ранее в секции defs.