Free Component

The Neon Gradient Card

A high-performance, GPU-accelerated glow effect that works perfectly with Tailwind CSS and Next.js. Free to use in your projects.

✨

Hover Me

This card uses a negative inset glow effect to prevent layout shifts. It's GPU optimized.

Try it out →

Preview of the card effect on hover.

components/NeonCard.tsx

export default function NeonCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative group w-full max-w-sm">
      {/* The Glow Effect */}
      <div className="absolute -inset-0.5 bg-gradient-to-r from-[#00ff94] to-[#00b8ff] rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-1000 group-hover:duration-200" />
      
      {/* The Content Container */}
      <div className="relative h-full bg-black border border-white/10 rounded-2xl p-8 flex flex-col justify-between">
        {children}
      </div>
    </div>
  );
}

🚀 Need Custom UI Components?

I build performant, interaction-heavy interfaces for startups and agencies.

Book a Project →