3 ms·

This is wrong on a lot of levels (x-platform, cpu usage, etc) but does make for such a pretty effect. Would be lovely if CSS(n+1) could support this kind of tra

This is wrong on a lot of levels (x-platform, cpu usage, etc) but does make for such a pretty effect. Would be lovely if CSS(n+1) could support this kind of transform, especially to pull it out of the GPU instead of bit-banging through a <canvas/>

jacobolus 15y ago
SVG can do it: http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement Unfortunately, browser support of less common SVG features is spotty – either missing or unoptimized.
- callmevlad 15y ago
  This seems like it applies the filter to the entire element (including its children), which would not give the same effect as blur.js without some complicated absolute-positioning trickery.
  - pygy_ 15y ago
    You could do it like this with CSS, data URI and SVG: .blur { background-image: url('data:image/xml+svg;utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="f1"> <feComponentTransfer> <feFuncR type="table" tableValues="0.5 1"/> <feFuncG type="table" tableValues="0.5 1"/> <feFuncB type="table" tableValues="0.5 1"/> </feComponentTransfer> <feGaussianBlur stdDeviation="5" /> </filter> </defs> <image x="0" y="0" width="300" height="80" xlink:href="http://background.png" filter="url(#f1)" /> </svg> '); } (expanded for clarty, and I didn't test it so it may be buggy/not syntactically correct). You can off course generate all that in JS and parametrize it. It should work in Chrome, but won't in IE9. No idea for other browsers. see http://jsfiddle.net/estelle/SJjJb/ http://jsfiddle.net/estelle/SJjJb/