Glass UI with Tailwind v4 and Nuxt UI

Glassmorphism only works when contrast and hierarchy stay readable. I treat glass panels as surfaces with a fixed recipe: dark fill, subtle border, blur, and a noise layer at low opacity.

The panel recipe

.glass-panel {
  @apply rounded-2xl border border-white/10 bg-slate-950/55 backdrop-blur-xl;
  box-shadow: 0 4px 32px rgb(0 0 0 / 0.35),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}

Pair with Nuxt UI tokens

Primary emerald and violet accents come from app.config. Buttons and badges stay on-design-system; glass is the container, not every interactive element.

• Limit backdrop-blur on large full-screen layers.
• Use gradient borders on hover via wrapper pseudo-elements.
• Test on mid-range Android — blur stacks quickly.