Display
玻璃拟态功能卡片
带有渐变边框发光、内部高光和分层透明深度的优质磨砂玻璃卡片。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a single premium glassmorphism feature card. The card should float over a dark, saturated gradient background. Use backdrop-filter blur, a thin semi-transparent white border, and an inner radial gradient highlight near the top-left corner to simulate glass reflection. Add a slowly rotating conic-gradient glow behind the card on hover. Inside, place a sharp icon, a bold headline in white, and a short description in white/60. Use a monospaced tag/label above the headline. Typography should feel precise and high-end. Ensure the glow effect is pure CSS and does not use images. Use Tailwind CSS.
中文提示词
创建一个高端玻璃拟态功能卡片。卡片应悬浮在深色饱和渐变背景之上。使用 backdrop-filter 模糊、半透明白色细边框,以及左上角附近的内径向渐变高光来模拟玻璃反射。悬停时在卡片背后添加缓慢旋转的锥形渐变光晕。内部放置锐利图标、白色粗体标题和白色/60 透明度的简短描述。标题上方使用等宽标签/眉标。排版应显得精准而高级。确保光晕效果为纯 CSS,不使用图片。使用 Tailwind CSS。

Overview
展示分层深度、光线反射和微妙动效的高端玻璃卡片。适合用于旗舰功能亮点。
Features
- backdrop-filter 磨砂玻璃
- 半透明边框与内部高光
- 悬停时旋转的锥形渐变边框光晕
- 深色饱和渐变背景
- 等宽标签 + 白色粗体标题
- 纯 CSS,无图片
Usage
放置在深色区域以突出单个旗舰功能、集成或推荐语。
Customization
修改 prompt 以:
- 在后面添加更小的卡片制造层叠深度
- 将光晕颜色改为品牌强调色
- 添加鼠标跟随的轻微倾斜效果
- 在卡片内加入小型数据指标