SuperAPI AI 工具集

glass-dark-ui

通用与其它

查看项目

更新于 10-15 20:07

技能介绍

用途:为深色界面提供玻璃拟态(glassmorphism)的具体 CSS 实现,包括设计令牌、backdrop-filter 配方、遮罩渐变边框与对比度下限。适用于需要磨砂玻璃面板、模糊外壳或渐变/发光边框的深色界面。

主要能力:先定义深色 UI 令牌(背景、玻璃填充、边框发光、主文本、弱化文本),再用 backdrop-filter、透明深色填充与细微内高光构建磨砂面板,并通过 .border-gradient::before 伪元素遮罩为关键表面添加渐变边框,同时加入克制的阴影与发光、清晰的悬停/聚焦状态。

使用方式:先确认环境(HTML/CSS、Tailwind 或 React)与目标表面(hero、仪表盘、模态框、卡片);定义令牌后构建磨砂面板,应用遮罩渐变边框,添加深度与交互状态,最后验证对比度与移动端表现。资料提供了基础令牌、玻璃面板模式、边框渐变模式与 Tailwind 用法示例。

适用场景:深色玻璃 hero 区、发光边框卡片、磨砂导航栏/卡片/模态框、深色仪表盘等。若需要整页方向(布局外壳、结构母题、强调色纪律)应改用 visual-style-presets 的 dark-glass-workspace 预设;若身份应来自框架与轨道而非模糊,用 dark-technical-framed;若背景本身是动画网格场,用 mesh-gradient-dark-blue-clean。

限制:正文文本在深色玻璃表面上至少保持 #cbd5e1;避免在模糊上叠加纯黑遮罩,改用深海军蓝/炭黑透明度;限制发光半径与强度以保持可读性;确保聚焦环可见;为非模糊环境提供更强的纯色背景回退(--glass-fill-strong)。