深色背景上的鲜艳渐变卡片，配合粗彩色边框和霓虹发光效果。适合科技产品、SaaS 着陆页、年轻化品牌。
深紫主色配合五彩霓虹强调色——每个颜色都在深色画布上以最大饱和度发光，不用于浅色背景。
渐变组合 — Gradient combinations
渐变填充、粗彩色边框、发光阴影——每个组件都充满霓虹能量。
Primary — 流体霓虹 Fluid Luminescence
Outline — 电流描边 Electric Border
Sizes
四条霓虹渐变核心交互规则——每个 Demo 都可以亲手交互感受。
渐变背景使用 bg-[length:200%_auto]，hover 切换 bg-position，制造灯管内色流滑动感。
bg-[length:200%_auto] bg-left hover:bg-right duration-500
悬停光晕使用至少双层阴影（近层高饱和 + 远层扩散）模拟霓虹色散，非单色放大。
shadow: near-high-sat + far-diffuse
:active 采用强内发光或瞬时高亮，不做明显压缩，呈现"通电"反馈。
active:shadow-[inset_0_0_20px_rgba(255,255,255,0.8)]
动画以 duration-300 到 500 + ease-out 为主，保持丝滑科技感。过快显得廉价，过慢显得迟钝。
duration-300 ~ 500 + ease-out
真实的 SaaS 控制台——渐变卡片、发光数据、霓虹图表，展示风格在实际产品中的应用。
最近 7 天
最新交易
深色画布 + 鲜艳渐变 + 粗彩色边框 + 发光效果——这是霓虹渐变的四大支柱，缺一不可。
霓虹需要黑暗才能发光
bg-[#0f0a1e] 或 bg-slate-900 是唯一起点。在浅色背景上，霓虹色失去所有冲击力——就像白天看霓虹灯牌。
高饱和度，绝不妥协
卡片使用 bg-gradient-to-br 渐变填充，而非纯色。饱和度必须拉满——from-purple-500 不是 from-purple-200。
border-4 是最低标准
边框必须是 border-4，颜色使用对比色（紫粉卡片配黄色边框），并搭配 shadow 模拟霓虹灯光晕。