> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/filters.md).

# Filters

Filters change how a component and its contents are rendered. Use them for blur, brightness, saturation, drop shadows, and backdrop blur.

{% embed url="<https://www.youtube.com/watch?v=wFKU85vhOEQ&list=PLlqV01jBZsjA6LyBb9uY-H7EtHjgO1HcR&index=1&pp=iAQB>" %}

### Type

**Type** is not responsive and defaults to None.

* **None** — Applies no filter classes.
* **Static** — Applies one set of filter values.
* **Hover** — Reveals Over and Start/End state controls.

### Hover Over and State

For Hover, **Over** defaults to Self. It can respond to Self, Parent, Container, Grid, Flex, or Custom ID.

Custom ID reveals a blank **ID** field. Enter the raw ancestor ID without `#` or `group/`.

**State** defaults to Start:

* **Start** — The resting filters.
* **End** — The filters applied while the chosen target is hovered.

### Filters

Static and each Hover state provide:

* **Blur** — Defaults to 0 pixels.
* **Brightness** — Defaults to 100%. Lower values darken; higher values brighten.
* **Saturate** — Defaults to 100%. `0` removes colour; values above 100 increase saturation.
* **Drop Shadow** — Defaults to None and uses Theme Studio shadow values. Unlike the Box Shadow in [Effects](/elements-docs/using-elements/components/common-controls/effects.md), a drop shadow follows the visible shape of the content — including the transparent areas of PNGs and SVGs — rather than its rectangular box.

### Backdrop Filters

**Backdrop Blur** defaults to 0 pixels. It blurs content behind the component rather than the component itself.

Backdrop blur is easiest to see when the component has a transparent or semi-transparent [Background](/elements-docs/using-elements/components/common-controls/backgrounds.md). A fully opaque background hides the content being blurred.

{% hint style="info" %}
Add a [Transition](/elements-docs/using-elements/components/common-controls/transitions.md) for smooth Hover filters. Large blur and backdrop-blur values can be expensive to render, especially over video or animated content.
{% endhint %}

### Custom ID Hover Groups

Container, Grid, and Flex automatically create the required hover group when an Advanced ID is set. Other parents must render the matching `group/your-id` class.

## Filters UI in Elements

<figure><img src="/files/xYVFFHT1suw3soossfyv" alt="Filter controls for blur, brightness, saturation, drop shadow, and backdrop blur"><figcaption><p>Filters can remain static or animate between hover states.</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/filters.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.