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

# CSS Filter Utilities for Images and Media in AtomicKit

> AtomicKit's filter utilities apply blur, brightness, contrast, saturation, hue rotation, and color effects to images and decorative layers in Elementor.

AtomicKit's filter utilities let you apply CSS visual effects directly to images, background layers, and decorative elements in Elementor — without writing a single line of custom CSS. From softening a blurred hero background to desaturating an inactive element, all filter adjustments are handled by a class that maps to a single `filter` property value.

<CardGroup cols={3}>
  <Card title="Blur" icon="droplet" href="#blur">
    Soften images and decorative layers with five blur steps from `blur-sm` to `blur-xl`, plus `filter-none` to reset.
  </Card>

  <Card title="Brightness" icon="sun" href="#brightness">
    Lighten or darken a layer using five steps from `brightness-75` to `brightness-125`.
  </Card>

  <Card title="Contrast" icon="circle-half-stroke" href="#contrast">
    Increase or reduce color contrast on media with steps from `contrast-75` to `contrast-125`.
  </Card>

  <Card title="Saturate" icon="palette" href="#saturate">
    Control color intensity from `saturate-0` (fully desaturated) to `saturate-200` (doubly vivid).
  </Card>

  <Card title="Hue Rotate" icon="rotate" href="#hue-rotate">
    Shift the hue of all colors on an element across the color wheel in increments from 15° to 180°.
  </Card>

  <Card title="Color Effects" icon="wand-magic-sparkles" href="#color-effects">
    Apply grayscale, invert, sepia, and partial variants for editorial and state-driven treatments.
  </Card>
</CardGroup>

## Shipped Filter Families

AtomicKit includes the following filter classes:

* **Blur** — `filter-none`, `blur-sm`, `blur`, `blur-md`, `blur-lg`, `blur-xl`
* **Brightness** — `brightness-75`, `brightness-90`, `brightness-100`, `brightness-110`, `brightness-125`
* **Contrast** — `contrast-75`, `contrast-90`, `contrast-100`, `contrast-110`, `contrast-125`
* **Saturate** — `saturate-0`, `saturate-50`, `saturate-100`, `saturate-150`, `saturate-200`
* **Hue Rotate** — `hue-rotate-15`, `hue-rotate-30`, `hue-rotate-60`, `hue-rotate-90`, `hue-rotate-180`
* **Color Effects** — `grayscale`, `grayscale-50`, `invert`, `invert-50`, `sepia`, `sepia-50`, `filter-none`

## Common Use Cases

**Decorative media backgrounds** — apply `blur-lg` or `blur-xl` to a full-bleed background image to keep it visually rich without competing with foreground text.

**Hero backgrounds behind text** — combine `brightness-75` or `brightness-90` to darken a photo just enough to make white text legible without a separate overlay layer.

**Inactive and muted states** — use `grayscale` on an image, icon, or card to signal that it's unavailable, completed, or de-prioritized.

**Editorial tone and mood** — `sepia` warms a photo for vintage or lifestyle aesthetics; `contrast-110` or `contrast-125` punches up an image for a graphic, bold look.

## Filter Combinations

AtomicKit applies one `filter` property per element. For multi-effect combinations — for example blurring and dimming the same layer — the recommended approach is to use a wrapper element:

```html theme={null}
<div class="blur-lg">
  <!-- Outer wrapper handles the blur -->
  <div class="brightness-75">
    <!-- Inner element handles the brightness reduction -->
  </div>
</div>
```

<Tip>
  Pair `blur` with `opacity` utilities for soft, layered overlays. Apply `blur-md` to a decorative background layer, then use `opacity-80` on the layer above to blend the two surfaces together smoothly.
</Tip>

***

## Blur

Soften images and decorative elements to move them visually into the background.

| Class          | CSS Property         |
| -------------- | -------------------- |
| `.filter-none` | `filter: none`       |
| `.blur-sm`     | `filter: blur(4px)`  |
| `.blur`        | `filter: blur(8px)`  |
| `.blur-md`     | `filter: blur(12px)` |
| `.blur-lg`     | `filter: blur(16px)` |
| `.blur-xl`     | `filter: blur(24px)` |

```html theme={null}
<div class="blur-lg">
  <!-- Background image element softened into the page -->
</div>
```

***

## Brightness

Lighten or darken a layer. Values below 100 darken; values above 100 lighten.

| Class             | CSS Property               |
| ----------------- | -------------------------- |
| `.brightness-75`  | `filter: brightness(0.75)` |
| `.brightness-90`  | `filter: brightness(0.9)`  |
| `.brightness-100` | `filter: brightness(1)`    |
| `.brightness-110` | `filter: brightness(1.1)`  |
| `.brightness-125` | `filter: brightness(1.25)` |

***

## Contrast

Increase sharpness between light and dark areas, or flatten an image for a softer effect.

| Class           | CSS Property             |
| --------------- | ------------------------ |
| `.contrast-75`  | `filter: contrast(0.75)` |
| `.contrast-90`  | `filter: contrast(0.9)`  |
| `.contrast-100` | `filter: contrast(1)`    |
| `.contrast-110` | `filter: contrast(1.1)`  |
| `.contrast-125` | `filter: contrast(1.25)` |

***

## Saturate

Control the vibrancy of colors on an element. Use `saturate-0` to strip all color and produce a grayscale effect with full CSS filter flexibility.

| Class           | CSS Property            |
| --------------- | ----------------------- |
| `.saturate-0`   | `filter: saturate(0)`   |
| `.saturate-50`  | `filter: saturate(0.5)` |
| `.saturate-100` | `filter: saturate(1)`   |
| `.saturate-150` | `filter: saturate(1.5)` |
| `.saturate-200` | `filter: saturate(2)`   |

***

## Hue Rotate

Shift all colors on an element around the color wheel. Useful for generating color variants from a single image, or for animated states.

| Class             | CSS Property                 |
| ----------------- | ---------------------------- |
| `.hue-rotate-15`  | `filter: hue-rotate(15deg)`  |
| `.hue-rotate-30`  | `filter: hue-rotate(30deg)`  |
| `.hue-rotate-60`  | `filter: hue-rotate(60deg)`  |
| `.hue-rotate-90`  | `filter: hue-rotate(90deg)`  |
| `.hue-rotate-180` | `filter: hue-rotate(180deg)` |

***

## Color Effects

Apply full or partial tonal treatments to images and media layers.

| Class           | CSS Property             | Effect                                             |
| --------------- | ------------------------ | -------------------------------------------------- |
| `.grayscale`    | `filter: grayscale(1)`   | Fully desaturated — removes all color              |
| `.grayscale-50` | `filter: grayscale(0.5)` | Partial desaturation — muted, faded look           |
| `.invert`       | `filter: invert(1)`      | Full color inversion — negative image effect       |
| `.invert-50`    | `filter: invert(0.5)`    | Partial inversion — washed-out or ghosted look     |
| `.sepia`        | `filter: sepia(1)`       | Full sepia tone — warm vintage brown tint          |
| `.sepia-50`     | `filter: sepia(0.5)`     | Partial sepia — subtle warmth without full tinting |
| `.filter-none`  | `filter: none`           | Removes all active filter effects                  |

```html theme={null}
<div class="grayscale">
  <!-- Image shown in full grayscale — useful for inactive or unavailable states -->
</div>

<div class="sepia">
  <!-- Image with warm vintage toning -->
</div>
```

***

## Best Practices

* **Apply blur to decorative media, not body text.** Blurred text is unreadable. Reserve blur for background images, decorative shapes, and layers that sit behind foreground content.
* **Use brightness to prepare background media for text.** `brightness-75` or `brightness-90` on a photo is often more elegant than a separate overlay `div` — it reduces the image to a readable contrast level with fewer DOM elements.
* **Use `filter-none` to reset inherited filter chains.** When a child element inside a filtered parent needs to appear unaffected, apply `filter-none` directly to that child to cancel out the inherited value.
* **Use `grayscale` for muted and inactive states.** Desaturating an image, icon, or card thumbnail is a clear, accessible way to signal that something is unavailable or disabled — paired with reduced opacity, it reads unmistakably as inactive.
* **Keep filter use intentional.** Stacking many filter values or applying filters to large portions of a page layout can be visually noisy and computationally expensive on lower-end devices.

## Related Utilities

* [Opacity](/effects/opacity) — Combine with filters to control transparency alongside visual effects.
* [Box Shadow](/effects/box-shadow) — Add elevation and depth to the same elements you're filtering.