glass-dark-ui

Glass Dark UI Skill

Use When

• A dark interface needs frosted glass panels, blur shells, or gradient/glow borders.
• You need the implementation — tokens, backdrop-filter recipe, masked gradient border, contrast floors — for a dark glass surface.

Choosing between the dark skills: use this one for the concrete CSS of a glass surface. Use visual-style-presets (dark-glass-workspace preset) when you need the whole page direction — layout shell, structural motif, accent discipline. Use visual-style-presets (dark-technical-framed) instead when the identity should come from frames and rails rather than blur, and mesh-gradient-dark-blue-clean when the background itself is an animated mesh field.

Workflow

1. Confirm environment (HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).
2. Define dark UI tokens first (background, glass fill, border glow, primary text, muted text).
3. Build frosted panels with backdrop-filter, transparent dark fill, and subtle inner highlight.
4. Apply the masked gradient border (.border-gradient::before) to key surfaces.
5. Add restrained depth (shadow + glow) and clear hover/focus states.
6. Validate contrast and mobile behavior before finalizing.

Base Tokens

Use these as defaults and tune per brand.

:root {
  --bg-0: #020617;
  --bg-1: #0b1220;
  --glass-fill: rgba(15, 23, 42, 0.45);
  --glass-fill-strong: rgba(15, 23, 42, 0.62);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
}

Glass Panel Pattern

.glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-color: var(--glass-fill);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

Border Gradient Pattern

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    145deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(96, 165, 250, 0.36) 45%,
    rgba(168, 85, 247, 0.3) 70%,
    rgba(148, 163, 184, 0.18) 100%
  );
  pointer-events: none;
}