Toggle Sidebar B
AppearanceLight & dark mode D

Glass Surface

Advanced Apple-style glass surface with real-time distortion + lighting.

Default

Scroll the stage to slide content under the glass, or switch to the landing page example. Every prop is wired to the controls underneath. The real distortion needs a Chromium browser; Safari and Firefox get a frosted fallback.

Light previewReplay previewOpen in new tab

Try scrolling.

The Summer Of GlassThe Summer Of GlassThe Summer Of Glass
Can Hold Any ContentCan Hold Any ContentCan Hold Any Content
Has Built-In FallbackHas Built-In FallbackHas Built-In Fallback

Customize

Example
Border Radius50px
Background Opacity0.1
Saturation1
Border Width0.07
Brightness50%
Opacity0.93
Blur11px
Displace0.5
Distortion Scale-180
Red Offset0
Green Offset10
Blue Offset20

API Reference

GlassSurface

PropTypeDefaultDescription
widthnumber | string200Width of the glass surface (pixels or CSS value like '100%').
heightnumber | string80Height of the glass surface (pixels or CSS value like '100vh').
borderRadiusnumber20Border radius in pixels.
borderWidthnumber0.07Border width factor for displacement map.
brightnessnumber50Brightness percentage for displacement map.
opacitynumber0.93Opacity of displacement map elements.
blurnumber11Input blur amount in pixels.
displacenumber0Output blur (stdDeviation).
backgroundOpacitynumber0Background frost opacity (0 to 1).
saturationnumber1Backdrop filter saturation factor.
distortionScalenumber-180Main displacement scale.
redOffsetnumber0Red channel extra displacement offset.
greenOffsetnumber10Green channel extra displacement offset.
blueOffsetnumber20Blue channel extra displacement offset.
xChannel"R" | "G" | "B""R"X displacement channel selector.
yChannel"R" | "G" | "B""G"Y displacement channel selector.
mixBlendModestring"difference"Mix blend mode for displacement map.

GlassSurface slots

PropTypeDefaultDescription
defaultslot-Content to display inside the glass surface.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The filter SVG is invisible and non-interactive; only the slot content is exposed to assistive tech.
  • Browsers without SVG backdrop filter support get a frosted-glass CSS fallback.
Glass IconsGlow Button