> For the complete documentation index, see [llms.txt](https://docs.vechainkit.vechain.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vechainkit.vechain.org/customization/glass-effect.md).

# Glass Effect

Enable and configure glass morphism effects:

```tsx
effects: {
    glass: {
        enabled: true, // Enable glass effects
        intensity: 'low' | 'medium' | 'high', // Glass intensity
    },
    backdropFilter: {
        modal: 'blur(15px)', // Optional: override modal blur
        // overlay blur is set via overlay.blur
    },
}
```

When glass is enabled, the system automatically:

* Applies appropriate blur values based on intensity
* Adjusts background opacities for glass morphism effect
* Maintains readability across all surfaces

**Glass Intensity Settings:**

* `low`: `blur(2px)`, modal opacity 0.6, sticky header opacity 0.7
* `medium`: `blur(3px)`, modal opacity 0.7, sticky header opacity 0.8
* `high`: `blur(5px)`, modal opacity 0.8, sticky header opacity 0.85

<figure><img src="https://2928565250-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS8udqSGhGctlwwL1kst7%2Fuploads%2Fgit-blob-592c9a12101b450b71f2087ac340e7165d461dd0%2FGroup%2021.png?alt=media" alt=""><figcaption></figcaption></figure>

When glass effects are enabled:

* Background colors automatically get reduced opacity based on intensity
* Blur values are applied to modal, overlay, and sticky header
* The system ensures readability while maintaining the glass aesthetic

If glass is disabled, default blur values are still applied (not removed).