Display
Glassmorphism Feature Card
A premium frosted-glass card with gradient border glow, inner highlights, and layered translucent depth.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一个高端玻璃拟态功能卡片。卡片应悬浮在深色饱和渐变背景之上。使用 backdrop-filter 模糊、半透明白色细边框,以及左上角附近的内径向渐变高光来模拟玻璃反射。悬停时在卡片背后添加缓慢旋转的锥形渐变光晕。内部放置锐利图标、白色粗体标题和白色/60 透明度的简短描述。标题上方使用等宽标签/眉标。排版应显得精准而高级。确保光晕效果为纯 CSS,不使用图片。使用 Tailwind CSS。

Overview
A high-end glass card that demonstrates layered depth, light reflection, and subtle motion. Ideal for premium feature highlights.
Features
- Backdrop-filter frosted glass
- Semi-transparent border with inner highlight
- Rotating conic-gradient border glow on hover
- Dark saturated gradient background
- Monospaced label + bold white headline
- Pure CSS, no images
Usage
Place in a dark section to highlight a single flagship feature, integration, or testimonial.
Customization
Modify the prompt to:
- Add a second smaller card behind it for layered depth
- Change the glow color to match brand accent
- Add a subtle tilt-on-mouse-move effect
- Include a small data metric or stat inside the card