'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EffectsAlea Pro
Glass and LiquidGlass
Frosted glass is free (Card variant="glass", surface="glass" on the ThemeProvider); LiquidGlass in Pro bends what is behind it at the edges, with a specular rim.
import { LiquidGlass } from '@alea/pro';
Examples
Glass surfaces
Free: Card variant="glass" and surface="glass". Pro: LiquidGlass bends what is behind it at the edges.
Tune frosted glass
Blur, saturation and tint are CSS variables; move the sliders to see what each one does.
--alea-glass-blur: 18px; --alea-glass-saturate: 170%;
Glass for a whole area
data-surface="glass" turns every floating surface inside into glass: here a navbar and its menu over a photo-like hero.
Liquid glass, refraction
Drag the slider: the stripes behind bend near the edges (Chromium); elsewhere it stays frosted glass.
When to use glass
Glass says "this floats above the page": it keeps the content behind it visible, so people keep their place. Use it for surfaces that sit over moving or colorful content: a navbar over a hero, a toolbar over a canvas, a player over artwork, a popover over a photo.
- Floating surfaces over imagery or gradients: yes.
- Over plain backgrounds it looks like a gray card and costs GPU time for nothing: use a solid surface.
- Over text (a dense page scrolling under a navbar) the blur must be strong enough that the text behind can't be read; the default 18 px is.
- Never for long reading: content cards, tables and forms stay solid.
How it works
- Frosted glass (free): a tint mixed from the theme surface (62% in dark, 58% in light), backdrop-filter: blur(18px) saturate(170%), and a rim: a 1 px light line on top and a hairline border, so the edge reads on any background.
- Liquid glass (Pro): the same, plus an SVG displacement map (feTurbulence and feDisplacementMap) applied to the backdrop, so what is behind bends near the edges like a lens, and a radial specular highlight. The refraction prop sets how many pixels the backdrop shifts.
- Both are only paint: no layout changes, no JavaScript per frame. LiquidGlass detects Chromium once to decide whether to add the displacement.
Three ways to use it
| How | What it does | Package |
|---|---|---|
| <Card variant="glass"> | One card or panel in glass | @alea/ui |
| <ThemeProvider surface="glass"> or data-surface="glass" on a wrapper | Every floating surface inside: navbar, popovers, menus, dialogs, drawers, toasts, command palette, hover cards, bottom navigation | @alea/ui |
| className="alea-glass" | Any element of your own | @alea/ui |
| <LiquidGlass refraction blur tint> | A lens-like surface that bends what is behind it | @alea/pro |
Tune it
| Variable | Default | What it changes |
|---|---|---|
| --alea-glass-blur | 18px | How much the background blurs. Below 12 px text behind starts to show through. |
| --alea-glass-saturate | 170% | Colors behind get richer, so the glass doesn't look dull. |
| --alea-glass-tint | surface at 62% (dark) / 58% (light) | The color of the glass. More opaque reads better, less opaque shows more. |
| --alea-glass-rim | a light top line and a hairline | The edge. Set it to none for borderless glass. |
| --alea-lg-blur (LiquidGlass blur prop) | 6px | Liquid glass blurs less, so the bending stays visible. |
| refraction prop | 28 | Pixels of displacement at the edges. 0 is frosted glass; 40 and up is strong. |
Browser support and fallbacks
| Browser | Frosted glass | Liquid glass |
|---|---|---|
| Chrome, Edge, Arc, Brave, Opera | Yes | Yes, with refraction |
| Safari (macOS and iOS) | Yes (-webkit-backdrop-filter) | Frosted, without refraction (Safari ignores url() in backdrop-filter) |
| Firefox | Yes | Frosted, without refraction |
| No backdrop-filter at all | Solid raised surface | Solid tint |
| prefers-reduced-transparency | Nearly opaque (94%) | Nearly opaque (92%) |
Performance
- Each glass surface makes the browser blur what is behind it on every frame that changes: a few on screen is fine, dozens (a glass card per list row) is not.
- Keep glass off large, fast-scrolling areas on low-end phones; a sticky navbar is the right size.
- Liquid glass costs a little more than frosted (one SVG filter pass); use it for one hero element, not for every surface.
- Glass inside a scaled or transformed parent re-renders on every animation frame; prefer animating its opacity.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-surface…
Radius
--alea-radius-lg…
Component
--alea-lg-blur…--alea-lg-filter…--alea-lg-tint…
Props
LiquidGlass props
Glass that bends what is behind it at the edges like a lens, with a specular rim. Falls back to frosted glass.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | |
blur | number | 6 | Background blur in px. Default 6. |
className | string | - | |
refraction | number | 28 | How much the edges bend what is behind (px of displacement). Default 28. Chromium only; others get frosted glass. |
style | CSSProperties | - | |
tint | string | - | Tint over the glass, any CSS color. Default a little of the surface color. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-liquid-glass.alea-fx-defs.alea-liquid-glass-content- Data attributes
data-refract
Accessibility
- Text on glass keeps its contrast because the tint is mixed from the surface color; check busy backgrounds with ContrastBadge.
- With prefers-reduced-transparency the glass becomes nearly opaque.
- Where backdrop-filter is missing, glass falls back to a solid surface.
Do and don't
Do
- Use glass on floating surfaces over content: navbars, popovers, toolbars.
- Keep what is behind the glass soft (gradients, photos), not text.
Don't
- Don't put long text on glass.
- Don't stack glass on glass.