Glow Border Card

A stunning animated card with a rotating conic gradient that creates a beautiful inner glow effect. The animation runs continuously without requiring hover.

Install using CLI

npx shadcn@latest add "https://vengeance-ui.vercel.app/r/glow-border-card.json"

Install Manually

Install dependencies

npm install clsx tailwind-merge

Add util file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Add styles to global CSS

Add the following styles to your app/globals.css file

/* GlowBorderCard Animation Utilities */

@property --glow-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

@keyframes glow-angle-rotate {
to { --glow-angle: 1turn; }
}

.glow-conic {
border-image: conic-gradient(
  from var(--glow-angle),
  var(--glow-color-1, #669900),
  var(--glow-color-2, #99cc33),
  var(--glow-color-3, #ccee66),
  var(--glow-color-4, #006699),
  var(--glow-color-5, #3399cc),
  var(--glow-color-6, #990066),
  var(--glow-color-7, #cc3399),
  var(--glow-color-8, #ff6600),
  var(--glow-color-9, #ff9900),
  var(--glow-color-10, #ffcc00),
  var(--glow-color-1, #669900)
) 1;
animation: glow-angle-rotate var(--glow-animation-duration, 4s) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.glow-conic { animation: none; }
}

Copy the source code

Copy the code below and paste it into components/ui/glow-border-card.tsx

'use client';

import React from 'react';
import { cn } from '@/lib/utils';

export interface GlowBorderCardProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
width?: string;
height?: string;
aspectRatio?: string;
borderRadius?: string;
animationDuration?: number;
gradientColors?: string[];
borderWidth?: string;
blurAmount?: string;
inset?: string;
colorPreset?: 'nature' | 'ocean' | 'sunset' | 'aurora' | 'custom';
paused?: boolean;
}

const colorPresets: Record<string, string[]> = {
nature: ['#669900', '#88bb22', '#99cc33', '#aaddaa', '#ccee66', '#006699', '#228888', '#3399cc', '#55aacc', '#669900'],
ocean: ['#006699', '#1177aa', '#2288bb', '#3399cc', '#44aadd', '#55bbee', '#66ccff', '#44bbee', '#2299cc', '#006699'],
sunset: ['#ff6600', '#ff7711', '#ff8822', '#ff9900', '#ffaa22', '#ffbb44', '#ffcc00', '#ff9933', '#ff7722', '#ff6600'],
aurora: ['#00ff87', '#22ffaa', '#44ffcc', '#60efff', '#88ddff', '#bb99ff', '#dd77ee', '#ff68f0', '#ff55cc', '#00ff87'],
custom: ['#669900', '#99cc33', '#ccee66', '#006699', '#3399cc', '#990066', '#cc3399', '#ff6600', '#ff9900', '#ffcc00'],
};

export const GlowBorderCard = React.forwardRef<HTMLDivElement, GlowBorderCardProps>(
(
  {
    children,
    className,
    width = '320px',
    height,
    aspectRatio = '1',
    borderRadius = '0.75rem',
    animationDuration = 4,
    gradientColors,
    borderWidth = '1.25em',
    blurAmount = '0.75em',
    inset = '-1em',
    colorPreset = 'custom',
    paused = false,
    style,
    ...props
  },
  ref
) => {
  const colors = gradientColors || colorPresets[colorPreset] || colorPresets.custom;
  
  const colorVars: Record<string, string> = {};
  for (let i = 0; i < 10; i++) {
    colorVars[`--glow-color-${i + 1}`] = colors[i % colors.length];
  }

  return (
    <div
      ref={ref}
      className={cn(
        "relative overflow-hidden grid place-content-center isolate",
        "bg-zinc-50/50 dark:bg-neutral-900/60 backdrop-blur-md",
        className
      )}
      style={{
        width,
        height: height || 'auto',
        aspectRatio: height ? 'unset' : aspectRatio,
        borderRadius,
        '--glow-animation-duration': `${animationDuration}s`,
        ...colorVars,
        ...style,
      } as React.CSSProperties}
      {...props}
    >
      <div 
        className={cn(
          "absolute -z-10 border-solid rounded-[inherit] glow-conic",
          paused && "[animation-play-state:paused]"
        )}
        style={{ inset, borderWidth, filter: `blur(${blurAmount})` }}
      />
      <div className="relative z-10 w-full h-full bg-transparent flex items-center justify-center p-4">
        {children}
      </div>
    </div>
  );
}
);

GlowBorderCard.displayName = 'GlowBorderCard';

export default GlowBorderCard;

Color Presets

Choose from built-in color themes or create your own custom gradient.

Custom Gradient

Pass your own array of colors to create unique effects.

Usage

1import { GlowBorderCard } from "@/components/ui/glow-border-card";
2
3export function MyComponent() {
4return (
5  <GlowBorderCard
6    width="300px"
7    aspectRatio="1"
8    colorPreset="aurora"
9    animationDuration={4}
10  >
11    <p className="text-white text-center">Your content here</p>
12  </GlowBorderCard>
13);
14}

Props

Prop Name	Type	Default	Description
children	`ReactNode`	`-`	Content to display inside the card.
width	`string`	`"320px"`	Width of the card.
height	`string`	`-`	Height of the card. If not set, aspectRatio is used.
aspectRatio	`string`	`"1"`	Aspect ratio (e.g., "1", "16/9", "4/3").
borderRadius	`string`	`"0.75rem"`	Corner radius of the card.
animationDuration	`number`	`4`	Rotation speed in seconds.
colorPreset	`"aurora" \| "ocean" \| "sunset" \| "nature" \| "custom"`	`"custom"`	Preset color theme.
gradientColors	`string[]`	`-`	Custom array of colors. Overrides colorPreset.
borderWidth	`string`	`"1.25em"`	Thickness of the glow border.
blurAmount	`string`	`"0.75em"`	Blur intensity for the glow.
inset	`string`	`"-1em"`	How far the glow extends inward.
paused	`boolean`	`false`	Pause the rotation animation.
className	`string`	`-`	Additional classes for the container.

Animated Hero Gradient Tiles