Glass surface
A frosted glass panel that blurs and lifts whatever sits behind it, with a draggable demo over a type field.
Frost study
Drag the glass panel across the type field, or use the arrow keys. The panel frosts whatever sits behind it.
Aa
Frost panel
Blur and saturation run on the panel, not the field, so the specimen rows stay sharp outside the glass.
Implementation
1"use client";2 3import type { CSSProperties, HTMLAttributes, ReactNode } from "react";4 5export type GlassSurfaceProps = Omit<6 HTMLAttributes<HTMLDivElement>,7 "children"8> & {9 /** Content that sits on the glass panel. */10 children: ReactNode;11 /** Backdrop blur radius as a CSS length. */12 blur?: string;13 /** Backdrop saturation multiplier. */14 saturate?: number;15 /** Additional class name for the root. */16 className?: string;17};18 19/**20 * A frosted glass panel. The panel blurs and saturates whatever sits behind21 * it with the standard backdrop-filter construction, carries a token-driven22 * surface tint, and keeps a single inset highlight for the specular rim.23 */24export function GlassSurface({25 children,26 blur = "16px",27 saturate = 1.45,28 className = "",