# Matte Glassmorphism
> Frosted, low-gloss glass surfaces that blur what is behind them while staying legible in both themes.
Glassmorphism is a surface that blurs and tints whatever sits behind it. The
glossy version can wash out text; the matte version dials down the shine and
saturation so content stays readable over any background. Both are one class.
## Matte over a busy background
`.s-glass-matte` is a heavier frost with low gloss. Here it floats over a stage
of solid color shapes so you can see the blur at work.
```summit
Matte glass
Frosted, low-gloss, and legible over anything behind it. No gradient, no glare.
```
## Glossy vs matte
The plain `.s-glass` keeps more transparency and saturation for a brighter,
glassier look. Choose it for accents and `.s-glass-matte` for anything holding
text.
```summit
.s-glass
Bright and glossy.
.s-glass-matte
Soft and legible.
```
## Copy it in
Put a glass surface over any positioned background: an image, a photo, or the
solid color blobs used here.
```html
Your content here.
```
## Notes
- The effect uses `backdrop-filter`, supported in all current browsers. Where it
is unavailable the surface degrades to a solid panel, which is still legible.
- Keep body text on `.s-glass-matte`, not `.s-glass`, for contrast.
- A glass bar makes a great sticky header. See [Navbar Patterns](https://summitjs.velofy.co/technique-navbars/).