> 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/effects.md).

# Effects

Effects add a box shadow or change the opacity of a component. They can remain static or animate between Start and End states when a visitor hovers.

{% embed url="<https://youtu.be/IljWfMjwW-Y>" %}

### Type

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

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

### Hover Over

When Type is Hover, **Over** defaults to Self.

| Option    | The End state is triggered when the visitor hovers over… |
| --------- | -------------------------------------------------------- |
| Self      | This component.                                          |
| Parent    | Its direct parent.                                       |
| Container | An ancestor Container.                                   |
| Grid      | An ancestor Grid.                                        |
| Flex      | An ancestor Flex.                                        |
| Custom ID | The ancestor with the supplied ID.                       |

Custom ID reveals **ID**, which is blank by default. Enter the raw ID without a `#` or `group/` prefix.

### State

**State** appears for Hover and defaults to Start.

* **Start** — The normal, resting appearance.
* **End** — The appearance while the chosen target is hovered.

State changes which values you are editing; it does not force that state in the published page.

### Box Shadow

For Static and each Hover state:

* **Size** — Selects a Theme Studio shadow and defaults to Default.
* **Color** — Overrides the shadow colour and defaults to None.
* **Opacity** — Controls shadow-colour opacity from 0–100% and defaults to 100%.

Unlike the Drop Shadow in [Filters](/elements-docs/using-elements/components/common-controls/filters.md), a box shadow follows the component’s rectangular box rather than the visible shape of transparent PNGs or SVGs.

### Opacity

The component **Opacity** ranges from 0–100% and defaults to 100% for Static and both Hover states.

{% hint style="info" %}
Add a [Transition](/elements-docs/using-elements/components/common-controls/transitions.md) when using Hover. Without one, the Start and End values switch immediately.
{% endhint %}

### Custom ID Hover Groups

Container, Grid, and Flex automatically create the required hover group when an Advanced ID is set. For a different or custom parent, ensure it renders the matching `group/your-id` class.

## Effects UI in Elements

<figure><img src="/files/YblyGjg9TI6pVjH4ZFzD" alt="Effects controls for type, hover state, shadow, and opacity"><figcaption><p>Effects can be static or respond to a hover target.</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/effects.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.