GlassSurface | Tuff Docs

Usage

Loading demo...

Loading demo...

Use it only where artwork, images, or gradients benefit from refraction; use TxBaseSurface or TxCard for regular cards.
Set width, height, and borderRadius explicitly when the glass sits over scrolling content or images.
Tune blur, backgroundOpacity, and saturation against the real background so text behind stays readable.
Reserve large distortionScale values and wide channel offsets for hero or preview surfaces, not dense forms.
Put important controls in the default slot.

Property	Type	Default	Description
width			Surface width; numbers are px, strings are used as-is.
height			Surface height; numbers are px, strings are used as-is.
borderRadius			Outer radius in px, also used by the displacement map.
borderWidth			Edge-size multiplier of the displacement map mask.
brightness			Lightness percentage of the map's inner mask.
opacity			Alpha of the map's inner mask.
blur			Blur radius of the map mask; also the blur of the backdrop-filter fallback.
displace			Final blur (feGaussianBlur.stdDeviation) after the RGB maps are blended.
backgroundOpacity			Background alpha on the SVG-filter path.
saturation			Saturation on the SVG-filter path.
distortionScale			Base displacement scale of the red, green, and blue maps.
redOffset			Red offset added to distortionScale.
greenOffset			Green offset added to distortionScale.
blueOffset			Blue offset added to distortionScale.
xChannel			X-axis channel read by all three maps.
yChannel			Y-axis channel read by all three maps.
mixBlendMode			Blend mode of the blue gradient when the map is generated.

Slot	Props	Description
`default`	-	Panel content, centered in `.tx-glass-surface__content` above the filter layer.

The rendering path follows support: SVG displacement refraction with backdrop-filter: url(), else a blur() frosted backdrop, else a translucent background with a border.
Safari, Firefox, SSR, and environments without CSS.supports skip refraction; the fallbacks keep size, radius, and readability but drop RGB refraction.
The displacement map is built from the measured size and regenerated when the size or an optical prop changes.
The generated SVG is decorative, non-interactive, and sits below the content layer.

Three feDisplacementMap passes shift the red, green, and blue channels separately and recombine them into a chromatic refraction.
Source: packages/tuffex/packages/components/src/glass-surface/.

packages/tuffex/packages/components/src/glass-surface/index.ts