Glass & surfaces
<nav class="an-glass an-glass-nav an-glass-noise">…</nav>Blur, saturation, a specular top edge, a seated bottom edge, and a four-layer shadow. Every var() carries its fallback inline, because a bare var() with the token unset invalidates the whole box-shadow and you lose all four layers, not one.
Tokens
| Token | Default |
|---|---|
--an-glass-blur | 16px |
--an-glass-tint | #fff |
--an-glass-alpha | 12% |
--an-glass-sat | 1.6 |
--an-glass-radius | 1rem |
Variants: an-glass-sm|md|lg|xl, -dark, -frost, -card, -nav, -tooltip, -edge, -flat.
Grain
an-glass-noise is a real feTurbulence type="fractalNoise" — rendered to a data-URI background-image, not referenced as a filter. That distinction is the whole reason it works everywhere.
an-noise-fine and an-noise-coarse change the frequency.
Refraction — and why it is opt-in
backdrop-filter: url(#svgFilter) does not work. WebKit parses it and renders nothing (bug 245510); Chromium handles only some cases.
Worse, the obvious guard is actively harmful:
/* DO NOT DO THIS */
@supports (backdrop-filter: url("#an-refract")) { … }@supports tests whether a declaration parses, not whether it renders. That query returns true in Safari and switches the broken path on. It looks safe and is not.
So refraction is explicit:
<html data-an-refract="on">
<div class="an-svg-glass-refract">…</div>Set the attribute after your own render probe. Without it, the element is plain an-glass — visually good, just not refractive.
The SVG sprite
Classes prefixed an-svg-* need assets/animatio-filters.svg pasted into your page once:
<svg width="0" height="0" aria-hidden="true" style="position:absolute">
<!-- contents of animatio-filters.svg -->
</svg>The prefix is the install instruction, and check:svg-naming enforces that exceptionlessly in both directions: no filter: url() outside an an-svg-* class, and no referenced filter id missing from the sprite.
Gotchas
filterandbackdrop-filtercreate a containing block. Aposition: fixeddescendant becomes relative to the glass element, so dropdowns, popovers and modals inside glass break. This is the #1 support question for every glass library.- They also create a stacking context, so
z-indexinside behaves differently. - Nested glass double-blurs —
an-glass-flatopts out of the backdrop. feDisplacementMapover a live backdrop is the most expensive thing in the library. Cap it at ~2 per viewport.
Shadows
an-shadow-0 … an-shadow-6 are layered ambient-plus-direct scales tinted from --an-shadow-color (an HSL triplet, so it can inherit your brand hue). Plus an-shadow-glow, -inner, -crisp, -long, -neu, -colored, -lift.