Skip to content
Docs
Glowing Card

Glowing Card

The card glows in gradient colours when hovered

requires interactionhover
Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/card/glowing-card.json

Manual

Add to your CSS

Add the following to your CSS file (Tailwind v4 @theme; v3 users can mirror the same values in tailwind.config.js under theme.extend).

@theme {
  --shadow-glow: 0 0 20px rgba(255, 204, 112, 0.7), 0 0 40px rgba(200, 80, 192, 0.5), 0 0 60px rgba(65, 88, 208, 0.3);
  --shadow-glow2: 0 0 20px rgba(50, 255, 50, 0.7), 0 0 40px rgba(20, 200, 20, 0.5), 0 0 60px rgba(5, 150, 5, 0.3);
  --blur-20: 20px;
  --blur-25: 25px;
  --brightness-150: 1.5;
}

Run the following command

It will create a new file called glowing-card.tsx inside the components/animata/card directory.

mkdir -p components/animata/card && touch components/animata/card/glowing-card.tsx

Paste the code

Open the newly created file and paste the following code:

import type React from "react";
 
import { cn } from "@/lib/utils";
 
interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Starting gradient color.
   */
  fromColor?: string;
  /**
   * Middle gradient color.
   */
  viaColor?: string;
  /**
   * Ending gradient color.
   */
  toColor?: string;
}
 
export default function GlowingCard({
  fromColor = "#4158D0",
  viaColor = "#C850C0",
  toColor = "#FFCC70",
  className,
  ...props
}: GlowCardProps) {
  const gradient = `linear-gradient(to right, ${fromColor}, ${viaColor}, ${toColor})`;
 
  return (
    <div
      className={cn(
        "rounded-3xl p-0.5 transition-[box-shadow,filter] duration-500 ease-in-out hover:shadow-glow hover:brightness-150",
        className,
      )}
      style={{ backgroundImage: gradient }}
      {...props}
    >
      <div className="relative w-56 overflow-hidden rounded-[calc(1.5rem-2px)]">
        <div
          aria-hidden
          className="blur-20 pointer-events-none absolute inset-0 rounded-[calc(1.5rem-2px)] transition-[filter] duration-500 ease-in-out"
          style={{ backgroundImage: gradient }}
        />
        <div className="relative flex h-64 flex-col gap-2 bg-blue-950 p-4">
          <div className="mb-2 text-xl font-bold text-gray-50">Glowing</div>
 
          <div className="flex-1 text-sm font-medium text-gray-100/80">
            A glowing card is a card that glows.
          </div>
        </div>
      </div>
    </div>
  );
}

How it works

The outer wrapper paints a gradient and uses p-0.5 so the gradient reads as a border around the inner panel. On hover, shadow-glow (a multi-stop box shadow defined in @theme) and brightness-150 ramp up over 500ms.

Inside, a second copy of the same gradient sits absolute inset-0 with blur-20 — that layer was stacking as a normal block sibling before, which broke the layout. Pinning it behind the content (relative + overflow-hidden on the inner shell) restores the soft bloom under the card face. Pass fromColor, viaColor, and toColor to retint both the border and the blur wash.

prefers-reduced-motion: no special branch — hover still changes shadow and brightness; only the 500ms transitions are decorative.

Credits

Built by Aashish Katila

Edit this page on GitHub
GitHub Card - SkewLed Board