How can I make very small blur effect?

Question

How can I make very small blur effect with -webkit-filter (or filter), between 1px and 0?

I've already tried something between 1em and 0.01em but as far as this filter is recalculating this to pixels and below if it's drops below 1px then is no blur at all..

Answer 1

here is a quite complex solution which involves duplicating some content: http://jsfiddle.net/BWj28/1/

It works by replicating the content box 4 times, shifting the replicants by 1 pixel in every direction and calculating the approppriate opacity for the replicants. The version above requires an opaque background.

      ---
      -a-
      ---

 ---  con  ---
 -d-  ten  -c-
 ---   t   ---

      ---
      -b-
      ---

HTML sample layout:

<div class="wrap">
    <div class="a t">Hello World!</div>
    <div class="b t">Hello World!</div>
    <div class="c t">Hello World!</div>
    <div class="d t">Hello World!</div>
    <div class="content">Hello World!</div>
</div>​

CSS:

.wrap {
    position: relative;
}
.a,.b,.c,.d {
    position: absolute;
}
.a { top: -1px; left:  0px; z-index:1; opacity:1;     }
.b { top: +1px; left:  0px; z-index:2; opacity:0.5;   }
.c { top:  0px; left: +1px; z-index:3; opacity:0.333; }
.d { top:  0px; left: -1px; z-index:4; opacity:0.25;  }
.wrap > div {
    background: yellow; /* any opaque background */
}