← Back to Prompts
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。
Glassmorphism Feature Card screenshot 1
## 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