Neon Gradient Card
霓虹漸層邊框發光卡片，邊緣以旋轉 conic 漸層流動並向外滲出光暈。
以旋轉的 conic 漸層繪製邊框，外圈再疊一層放大模糊的同色光暈，形成賽博龐克式的霓虹發光效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
20
26
6
<NeonGradientCard />
安裝
npx shadcn@latest add https://webberui.com/r/neon-gradient-card.json或在 components.json 設定 registries 後，改用 @webberui/neon-gradient-card 安裝。
安裝依賴後，從 registry JSON（/r/neon-gradient-card.json 的 files[0].content）複製 neon-gradient-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { NeonGradientCard } from "@/components/ui/neon-gradient-card";
<NeonGradientCard className="max-w-xs">
<h3 className="text-2xl font-bold">Neon Gradient</h3>
<p>會呼吸的霓虹漸層邊框。</p>
</NeonGradientCard>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
firstColor | string | "#ff2e97" | 漸層第一色（起點與終點，形成無縫循環） |
secondColor | string | "#00d4ff" | 漸層第二色 |
borderSize | number | 2 | 邊框粗細（px） |
borderRadius | number | 20 | 圓角半徑（px） |
glow | number | 26 | 外圈光暈的模糊量（px） |
duration | number | 6 | 漸層旋轉一圈的秒數 |
children | ReactNode | — | 卡片內容 |
可及性
- 使用者系統開啟「減少動態效果」時，漸層停在固定角度、不再旋轉，仍保有霓虹外觀
- 光暈層帶
aria-hidden，僅供裝飾，不干擾輔助科技朗讀內容