Neon Gradient Card: Glowing Border Card for React

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add neon-gradient-card.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<NeonGradientCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/neon-gradient-card.en.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

Three ways to build an animated gradient border in Tailwind

Neon Gradient Card