Use glass effects without losing readability

Choose the effect that fits the job

CSS frost gives buttons, panels and overlays a translucent surface. Glass Scene adds refraction by drawing its supplied backdrop through one WebGL2 canvas. It does not capture and refract arbitrary DOM behind the page. Glass Lens magnifies a copy of its own content.

Use an explicit backdrop for a scene and keep its content in ordinary HTML. The renderer takes no clicks or focus. When WebGL2 is unavailable, the scene reports that condition and its children retain their CSS glass.

Let people reduce the effect

Reduced transparency, increased contrast and forced colors turn off the scene canvas. Reduced motion stops its flowing distortion. Keep those controls intact when copying the source.

Mount a Glass Provider to synchronize app preferences. A settings action can update both motion and transparency without replacing the actual controls:

"use client";

import { GlassButton } from "@/components/glassyui/glass-button";
import { usePreferences } from "@/components/glassyui/glass-provider";

export function ReduceEffects() {
  const { setPreferences } = usePreferences();
  return (
    <GlassButton onClick={() => setPreferences({ reduceMotion: true, reduceTransparency: true })}>
      Reduce glass effects
    </GlassButton>
  );
}

Use this inside a provider and alongside your existing settings. It is an example of updating preferences, not a complete settings screen.

Keep text and controls legible

Check your actual backdrop and text colors together. Scene surfaces adjust their face behind text, but that does not make every custom color, nested layer or new composition automatically accessible. Test the final result with the longest labels and the lightest and darkest parts of your chosen image.

Preserve visible focus rings, labels, keyboard operation and Radix semantics. For icon-only dock links, give each destination a meaningful label. Do not communicate state through transparency alone.

A lens renders its children twice. Use decorative, non-interactive content inside it and avoid duplicate IDs. Put real links and form controls outside the magnified content.

Spend rendering work where it is visible

Start with one scene or a small number of glass accents. A large animated backdrop or many transparent layers can cost more than a static card; there is no universal frame-rate promise across devices.

Test the actual page in Chrome, Safari and Firefox and on the devices your audience uses. Check scrolling and input while the effects run, then repeat with reduced preferences. Use the library’s quality preferences for dense screens and reserve strong refraction for the surfaces that benefit from it.

The portfolio starter and component examples are useful starting points. Your final content and devices are the acceptance surface.