glass-dark-ui

name	glass-dark-ui
description	使用伪元素遮罩构建暗色模式的玻璃拟态界面，具备可读的对比度、磨砂面板与渐变边框。当需要玻璃卡片、磨砂暗色主视觉区、模糊面板，或带渐变/发光边框的暗色 UI 系统时使用。

Glass Dark UI Skill

工作流程

1. 确认环境（HTML/CSS、Tailwind 或 React）与目标面板（hero、dashboard、modal、card）。
2. 先定义暗色 UI 令牌（背景、玻璃填充、边框辉光、主文本、弱化文本）。
3. 用 backdrop-filter、透明的暗色填充与微妙的内高光构建磨砂面板。
4. 将遮罩渐变边框（.border-gradient::before）应用到关键面板。
5. 添加克制的纵深（阴影 + 辉光）与清晰的悬停/聚焦态。
6. 定稿前校验对比度与移动端表现。

基础令牌

将这些作为默认值，并按品牌调节。

: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 {
  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 {
  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;
}

Tailwind 用法模式

<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
  <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
  <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>

暗色模式检查清单

• 在暗色玻璃面板上，正文文字至少保持 #cbd5e1。
• 避免在模糊之上叠加纯黑遮罩；改用深海军蓝/炭灰的 alpha。
• 限制辉光的半径/强度以保持可读性。
• 确保聚焦环可见（outline 或明亮的边框态）。
• 为不支持模糊的环境提供回退：更强的实心背景（--glass-fill-strong）。

本技能应处理的常见请求

• 「创建一个带发光边框卡片的暗色玻璃主视觉区。」
• 「把这个明亮 UI 转成暗色玻璃拟态且不失对比度。」
• 「给磨砂导航栏/卡片/模态框加上渐变边框辉光。」
• 「用玻璃面板与微妙纵深让我的暗色仪表盘显得高级。」