| description | Apply shadows, opacity, and hover 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 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.
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 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.
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, a box shadow follows the component’s rectangular box rather than the visible shape of transparent PNGs or SVGs.
The component Opacity ranges from 0–100% and defaults to 100% for Static and both Hover states.
{% hint style="info" %} Add a Transition when using Hover. Without one, the Start and End values switch immediately. {% endhint %}
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 can be static or respond to a hover target.