Glass Surface
A glassmorphic surface with live distortion, refraction, specular highlights, and pointer tilt.
An SVG displacement filter distorts the background in real time, with specular highlights and a dimensional edge layered on top, giving the refractive quality of Apple's "liquid glass".
Loading preview…
npx shadcn@latest add https://webberui.com/r/glass-surface.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
28
4
1.7
36
0.008
<GlassSurface />
Installation
npx shadcn@latest add https://webberui.com/r/glass-surface.jsonOr, once registries are configured in components.json, install it as @webberui/glass-surface.
Usage
import { GlassSurface } from "@/components/ui/glass-surface";
<GlassSurface className="w-72">
<p className="text-lg font-semibold text-white">Liquid Glass</p>
</GlassSurface>Place the glass over a colored or patterned background so the refraction and saturation actually show. Control the size with className and the inner spacing with padding.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 28 | Corner radius (px) |
blur | number | 4 | Background blur strength (px) |
saturation | number | 1.7 | Background saturation multiplier; >1 makes the colors coming through more vivid |
distortion | number | 36 | Refraction displacement (px), controlling how strongly the edge lenses |
frequency | number | 0.008 | Refraction noise frequency; smaller values make larger, smoother ripples |
tint | string | rgba(255,255,255,0.12) | Glass tint (a translucent overlay layer) |
interactive | boolean | true | Pointer tilt, specular light tracking, and stronger distortion on hover (mouse only) |
padding | string | "p-6" | Tailwind class for the inner spacing |
className | string | — | Forwarded to the outer container (use it to set the size) |
Accessibility
- When the user has "reduce motion" enabled at the system level, the refraction distortion and pointer tilt are turned off and a static frosted glass remains
- The refraction filter is applied through
backdrop-filter'surl(); browsers that do not support it fall back automatically to plain blur and saturation without breaking the layout - Every decorative layer is
aria-hidden, so it does not affect how the content is announced