# blur

```js
import { pibbl, createElement, Circle } from "@pibbl/core";
import { blur } from "@pibbl/core/filters";
const controller = pibbl(
  canvas,
  createElement(Circle, {
    style: {
      cx: 150,
      cy: 100,
      radius: 60,
      fill: "#267d7c",
      filter: [blur({ radius: 8 })],
    },
  }),
);
```

Use a 300 by 200 canvas. The required `radius` is a finite nonnegative logical-pixel value; eight gives a soft edge in this example. Zero is valid. Related option type: `PibblBlurFilterOptions`.

A filter captures the receiving primitive plus descendants as one silhouette. A list runs in forward order; nested boundaries run inside out. Layout, hit testing, focus bounds, and pointer coordinates keep their original geometry. Canvas blur cannot filter an HTML button or `HtmlBox` subtree. Browser Canvas filter support is required for the native blur executor.

Larger captures and multiple boundaries cost more transient surface work. Start with one bounded region. Compare the [unfiltered and filtered circles](/catalogs/filters/blur/) or [edit the existing filter example](/playground/#/examples/drawing/filters). Dispose the Pibbl controller when the host is removed.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.