Pricing

Neon Gradient Card

A beautiful neon card effect

6,598

Bookmarks

6,798

Installs

115,398

Views

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

export default function NeonGradientCardDemo() {
  return (
    <NeonGradientCard className="max-w-sm items-center justify-center text-center">
      <span className="pointer-events-none z-10 h-full bg-linear-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-3xl leading-none font-bold tracking-tighter text-balance whitespace-pre-wrap text-transparent md:text-5xl xl:text-6xl dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">

5 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Dependencies
None — plain React + Tailwind
License
MIT License
Published
1/12/2025

Similar components

That's all 6 components

Explore more

Part of Magic UI — browse the full library on Nuxus.