# Tab 3 - Overlay Effects

The **Overlays** tab lets you add full-page visual layers like grain, noise, or texture on top of your website.

You can find this tab by clicking the **overlay / stack icon** in the left vertical menu of the Aura Suite panel. Overlays are applied globally across your site and help add depth and visual character.

***

### Step 1: Enable Overlays

To activate overlays, simply enable the **Overlay Toggle** at the top of the panel.

Once enabled, the selected overlay effect will be applied to your live website.

After enabling overlays, you can adjust how the effect looks using the following settings:

#### 1. Opacity

Opacity controls **how strong the overlay appears** on your website.

* Higher value → overlay is more visible
* Lower value → overlay is more subtle

{% hint style="info" %}
For most designs, subtle values (10-40%) work best and add texture without distracting from content.
{% endhint %}

#### 2. Blend Mode

Blend modes control **how the overlay mixes with your website content**.

Different blend modes create very different visual results depending on:

* background colors
* images
* video content

There is no single best option for every design, so we recommend testing different blend modes on the **live website** to see what fits best.

{% hint style="info" %}
**Recommended Blend Mode**

In most cases, **Soft Light** gives the most natural and subtle result and blends well with both light and dark layouts.
{% endhint %}

#### 3. Overlay Effect

Here you can choose the actual overlay style, such as:

* noise
* grain
* pixel textures
* and more

To change the effect, simply click on a different overlay option.

The overlay library is continuously expanded and improved over time.

***

### Step 2: Saving Your Overlay Settings

After adjusting opacity, blend mode, or overlay style:

Click the **Save** button in the top-right corner of the Aura Suite panel.

Your settings will be uploaded and applied to the live website automatically within a few seconds.

{% hint style="info" %}

### Design Tips

* Keep opacity low for subtle, premium texture
* Test overlays on multiple pages if your backgrounds vary
* Avoid very strong overlays on text-heavy sections

Overlays should enhance the design, not compete with your content.
{% endhint %}

***

### What’s Next?

Next, continue with:

* [**Tab 4 - Add GSAP Animations to Texts**](/interactive-studio/aura-suite/get-started/tab-4-gsap-text-effects.md)

This section lets you add animated typography to your layouts.


---

# Agent Instructions: 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:

```
GET https://insync.gitbook.io/interactive-studio/aura-suite/get-started/tab-3-overlay-effects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.