Neon Gradient Card

A card with a glowing neon gradient border, its edge flowing with a rotating conic gradient that bleeds outward as a halo.

The border is drawn with a rotating conic gradient, and an enlarged, blurred halo in the same colors is layered outside it, producing a cyberpunk neon glow.

Loading preview…

npx shadcn@latest add https://webberui.com/r/neon-gradient-card.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

First colorfirstColor

Second colorsecondColor

Border widthborderSize

Corner radiusborderRadius

Glow blurglow

Rotation period (s)duration

<NeonGradientCard />

Installation

npx shadcn@latest add https://webberui.com/r/neon-gradient-card.json

Or, once registries are configured in components.json, install it as @webberui/neon-gradient-card.

Usage

import { NeonGradientCard } from "@/components/ui/neon-gradient-card";

<NeonGradientCard className="max-w-xs">
  <h3 className="text-2xl font-bold">Neon Gradient</h3>
  <p>A neon gradient border that breathes.</p>
</NeonGradientCard>

Props

Prop	Type	Default	Description
`firstColor`	`string`	`"#ff2e97"`	First gradient color (both start and end, forming a seamless loop)
`secondColor`	`string`	`"#00d4ff"`	Second gradient color
`borderSize`	`number`	`2`	Border thickness (px)
`borderRadius`	`number`	`20`	Corner radius (px)
`glow`	`number`	`26`	Blur amount of the outer halo (px)
`duration`	`number`	`6`	Seconds for the gradient to complete one rotation
`children`	`ReactNode`	—	Card content

Accessibility

When the user has "reduce motion" enabled at the system level, the gradient rests at a fixed angle instead of rotating and still keeps its neon look
The halo layer carries aria-hidden — decorative only, so it does not interfere with assistive technology announcing the content