> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blur

> Use the bundled blur utilities to soften media and supporting layers.

export const FilterBlurDemo = () => {
  const levels = [{
    cls: "filter-none",
    val: "none"
  }, {
    cls: "blur-sm",
    val: "4px"
  }, {
    cls: "blur",
    val: "8px"
  }, {
    cls: "blur-md",
    val: "12px"
  }, {
    cls: "blur-lg",
    val: "16px"
  }, {
    cls: "blur-xl",
    val: "24px"
  }];
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="33%" stop-color="#a855f7"/><stop offset="66%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="400" height="300" fill="url(#a)"/><circle cx="80" cy="220" r="50" fill="rgba(255,255,255,0.15)"/><circle cx="300" cy="80" r="70" fill="rgba(255,255,255,0.1)"/><circle cx="200" cy="150" r="30" fill="rgba(255,255,255,0.2)"/></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-5 gap-4">
          {levels.map(l => <div key={l.cls} className="flex flex-col items-center gap-2">
              <span className="tw-label">{l.cls}</span>
              <div className="rounded-lg overflow-hidden" style={{
    width: "100%",
    aspectRatio: "4/3"
  }}>
                <img src={imgSrc} alt="" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    filter: l.val === "none" ? "none" : "blur(" + l.val + ")"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Blur utilities are now bundled and mapped through the current framework source. They are most useful for decorative media, background plates, and softened support layers.

| Class          | Filter (CSS)          | Usage                                  |
| -------------- | --------------------- | -------------------------------------- |
| `.filter-none` | `filter: none;`       | Reset inherited blur or other filters  |
| `.blur-sm`     | `filter: blur(4px);`  | Light softening                        |
| `.blur`        | `filter: blur(8px);`  | Default decorative blur                |
| `.blur-md`     | `filter: blur(12px);` | Medium background plates               |
| `.blur-lg`     | `filter: blur(16px);` | Strong blur for depth                  |
| `.blur-xl`     | `filter: blur(24px);` | Heavy blur for hero or frosted effects |

## Example

<FilterBlurDemo />

### Markup

```html theme={null}
<img alt="Softened background media" class="blur-md rounded-xl" src="hero.jpg"/>
```

## Best Practices

* Use blur on decorative media, not on body text.
* Start with `blur-sm` or `blur` before moving into the heavier levels.
* Pair blur with opacity and overlays for more controlled hero treatments.
* Use `filter-none` to intentionally reset inherited filter chains.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Brightness" icon="brightness" href="/filters/brightness">
    Pair blur with brightness adjustments on media
  </Card>

  <Card title="Saturate" icon="droplet" href="/filters/saturate">
    Add or remove intensity after softening imagery
  </Card>
</CardGroup>