nabous.devGlass surface
Blur the background and catch the pointer light along the edge.
Get the CSSCSS EXPERIMENT / GLASS & LIGHT
Lumenmorph
The glass from nabous.dev, without the site around it.
Adjust the material. Keep your markup.
01 / LIVE MATERIAL Move your pointer
A background and one border pseudo-element.
03 / OPTIONAL SVG TEXT
Two SVG masks. Shared page light.
04 / HTML TEXT
Lumenmorph
The original glassmorphism-text treatment. Selectable HTML; no component required.
05 / SVG ICON
The SVGGlassMorph icon treatment, without a layout wrapper.
IMPLEMENTATION
Use these settings
Foundations
Choose one styling route. Set the shared material and, optionally, start one page-level pointer tracker.
SVG components
Reuse the foundation's styles and .material settings above. Initialize the tracker once in your app's browser lifecycle, not per SVG.
Vue, Svelte, Angular, and Web Components render the effect after mounting. Use HTML glass text if it must be visible before hydration.
CSS is the core.
No runtime, canvas, wrappers, or event handlers for static surfaces. The border uses one pseudo-element.
One shared light.
The optional helper writes two inherited variables, at most once per animation frame. It does nothing while idle.
Use it where it fits.
Backdrop blur and gradient painting have a cost. Keep large blurred areas in check and test on your target devices.