Elevation System

Elevation is a single integer (0–5) that encodes depth. Each level maps to a full glass rendering recipe: blur intensity, tint opacity, diffusion weight, sheen strength, and ambient shadow. Higher elevation = more blur, more separation, more visual presence.

Elevation token table

These are the exact values from glassTokens.elevation:

Level	Blur	Tint opacity	Sheen opacity	Shadow radius	Use case
0	0	0.20	0.016	0	Flat / no glass
1	22	0.32	0.058	38	Subtle card, inline surface
2	38	0.38	0.078	54	Standard card (default)
3	54	0.44	0.095	70	Floating panel, header
4	68	0.50	0.112	86	Modal, bottom sheet
5	82	0.54	0.132	108	Top-level overlay, dialog

Blur drives perceived depth

In liquid glass design, blur is the primary depth signal — not shadow intensity or opacity. A more blurred surface appears physically higher above the content it floats over. Shadow is secondary: it provides soft ambient separation without making surfaces look like cards stuck to the screen.

Tint opacity stays very low (< 0.55) across all levels. The apparent visual body of the surface comes from the diffusion layers — internal haze views — not from the tint. This keeps the glass optically transparent while still feeling solid.

Using elevation

Pass elevation to GlassView or any glass-aware component that accepts glass props:

tsx

1import { GlassView, BlurSurface, FrostPanel } from 'reactnatively';23// Inline content card4<GlassView elevation={2} borderRadius={16} style={{ padding: 20 }}>5  <Text>Standard card</Text>6</GlassView>78// Floating modal container9<GlassView elevation={4} borderRadius={24} style={{ padding: 24 }}>10  <Text>Modal content</Text>11</GlassView>1213// Full-width header panel14<FrostPanel elevation={3} edges={['bottom']} style={{ paddingTop: 56 }}>15  <Text>Header</Text>16</FrostPanel>

Material presets

Instead of setting elevation directly, you can pass a material preset, which bundles an elevation + variant into a semantic recipe:

tsx

// Material preset overrides the elevation prop
<GlassView material="modal" style={{ padding: 24 }}>
  <Text>Modal surface</Text>
</GlassView>

Manual overrides

Override specific parameters of the elevation recipe without abandoning the elevation system entirely:

tsx

// Use elevation 2 base, but increase blur for extra depth
<GlassView
  elevation={2}
  blurOverride={60}
  tintOverride="rgba(120, 160, 255, 0.06)"
  style={{ padding: 20 }}
>
  <Text>Custom-tinted surface</Text>
</GlassView>

GlassView API Capability detection