# Frosted glass

> Blur the page behind floating surfaces with one custom property.

## Overview

Floating surfaces can show the page behind them through a frosted, translucent container. The effect is off by default. One custom property turns it on for a page or a region, without JavaScript.

Solid

Default glass

Custom glass

The three toolbars differ only in their wrapper's settings: off, the defaults, and a 4px blur at 40% opacity. Glass frosts whatever sits behind a surface. Over a flat page color it looks almost solid, so the demos sit on a striped backdrop.

## Turn it on

Set `--expressive-glass: true` on `:root` to turn it on for the whole page:

```
:root {
  --expressive-glass: true;
}
```

Or set it on an element that contains the surfaces to turn it on for that region only. `--expressive-glass: false` turns it off again inside a region.

```
<main style="--expressive-glass: true">
  <div class="toolbar">...</div>  <!-- glass -->
  <section style="--expressive-glass: false">
    <div class="toolbar">...</div>  <!-- solid -->
  </section>
</main>
```

The browser reads the value from the surface's parent, so setting `--expressive-glass` on the surface itself has no effect. Put it on `:root` or on a wrapper.

## Settings

Three custom properties control the effect. Each works on `:root` or on a wrapper, and the closest one wins.

| Property | Default | Effect |
| --- | --- | --- |
| `--expressive-glass` | unset (off) | `true` turns glass on and `false` turns it off. In the default build, only `true` turns it on. |
| `--expressive-glass-blur` | `16px` | Blur radius of the backdrop. Higher values frost more. |
| `--expressive-glass-opacity` | `72%` | How much of the surface color stays. `100%` is solid, and lower values let more of the page through. Use a percentage. |

```
:root {
  --expressive-glass: true;
  --expressive-glass-blur: 16px;    /* frost thickness */
  --expressive-glass-opacity: 72%;  /* share of the surface color kept; 100% is solid */
}
```

Each surface mixes its own container color with transparency, so theme and component color tokens still apply.

## Sass defaults

Sass builds can turn glass on by default and change the default blur and opacity. The custom properties still override these settings at runtime.

| Variable | Default | Effect |
| --- | --- | --- |
| `$expressive-glass` | `false` | `true` makes glass the default, and only `--expressive-glass: false` turns it off. |
| `$expressive-glass-blur` | `16px` | Fallback for `--expressive-glass-blur`. |
| `$expressive-glass-opacity` | `72%` | Fallback for `--expressive-glass-opacity`. The build fails if it is not a percentage. |

```
@use "@expressivecss/expressive/src/sass/expressive" with (
  $expressive-glass: true,
  $expressive-glass-blur: 16px,
  $expressive-glass-opacity: 72%
);
```

## Surfaces

The effect applies to these surfaces:

-   [Menus](/menu.html.md), [tooltips](/tooltips.html.md) and [popovers](/popover.html.md)
-   [Dialogs](/dialogs.html.md), the [command palette](/command-palette.html.md), [bottom sheets](/bottom-sheet.html.md) and [side sheets](/side-sheet.html.md)
-   The [snackbar](/snackbar.html.md)
-   The [navigation bar](/navigation-bar.html.md) and [navigation rail](/navigation-rail.html.md)
-   [Toolbars](/toolbars.html.md) and the [search view](/search.html.md)

Grouped menus and a modal navigation rail keep a solid surface. The modal rail would otherwise clip its own scrim.

## Accessibility

Users who ask for reduced transparency or more contrast in their system settings see solid surfaces. The framework checks `prefers-reduced-transparency: reduce` and `prefers-contrast: more`, so you do not need to.

Text on a glass surface sits over whatever the page shows behind it. Over busy images or saturated colors, keep `--expressive-glass-opacity` high enough that labels still meet contrast requirements.

## Caveats

-   The switch uses CSS style queries. Browsers without them show solid surfaces.
-   `backdrop-filter` makes a surface the containing block for its `position: fixed` descendants. A fixed element inside a glass surface is placed relative to the surface, not the viewport.

## Preview this site

The **Frosted glass** button in this site's app bar sets `--expressive-glass: true` on `:root` for every page. It also tints the page background so the effect shows behind the surfaces. The choice is saved in this browser.