Surface variant

Glassmorphism React components

Glass is one surface variant in Glin UI, next to solid and outline. Use it where depth helps, and check contrast where it can hurt.

Glass on a real backdrop

Glass only reads as glass when something sits behind it. Pair it with a calm gradient or image, never a busy pattern.

Team plan

Unlimited projects and shared tokens.

import { GlassCard } from "@glinui/ui"


export function PlanCard() {
  return (
    <GlassCard className="p-6">
      <h3 className="text-lg font-medium">Team plan</h3>
      <p className="text-sm text-muted">Unlimited projects and shared tokens.</p>
    </GlassCard>
  )
}

Production checklist

Tick these off before shipping a glass surface. Each one is a common way glass goes wrong.

Text keeps WCAG AA contrast (4.5:1) against the real backdrop in light and dark.
Blur, border, and elevation come from tokens, not one-off values.
Animations use transform and opacity, not blur radius.
Reduced-motion users get a static version of every animated surface.
No more than two blurred layers overlap on the same screen area.

When to use glass, and when not to

Do

Use glass for overlays, floating navbars, and docks over rich backgrounds.
Test contrast with the busiest part of the backdrop behind the text.
Fall back to a solid surface when backdrop blur is unsupported.

Don't

Do not use glass for dense tables or long form text.
Do not stack several glass panels over each other.
Do not rely on blur alone to separate text from a noisy image.

Frequently asked questions

What are glassmorphism React components?

Glassmorphism React components use translucent layers, background blur, and subtle borders to suggest depth, while keeping semantic HTML and keyboard behavior intact.

Can glassmorphism be accessible?

Yes, if text contrast is checked against the real backdrop, focus rings stay visible, and motion respects prefers-reduced-motion. Glass works best on calm backgrounds and for secondary surfaces.

Is Glin UI only glassmorphism?

No. Glass is one surface variant. Glin UI also has solid and outline surfaces, OKLCH tokens, an animation hub, and copy-for-AI prompts.

Does glassmorphism hurt performance?

Backdrop blur is costly on large or stacked surfaces. Limit how many blurred layers overlap, avoid animating blur radius, and animate transform and opacity instead.