Border Glow

Animated gradient border wrapper with glow effects and multiple presets.

Default Glow

import { BorderGlow } from "@/registry/aliimam/components/border-glow"

export function BorderGlowExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BorderGlow height="300px">
        <div className="flex h-full items-center justify-center text-center text-lg font-semibold">
          Default Glow
        </div>
      </BorderGlow>
    </div>
  )
}

Pastel Glow

import { BorderGlow } from "@/registry/aliimam/components/border-glow"

export function BorderGlowExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BorderGlow height="300px" colorPreset="pastel" animationDuration={6}>
        <div className="flex h-full items-center justify-center text-xl font-bold">
          Pastel Glow
        </div>
      </BorderGlow>
    </div>
  )
}

Custom Colors

import { BorderGlow } from "@/registry/aliimam/components/border-glow"

export function BorderGlowExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BorderGlow
        height="300px"
        gradientColors={["#ff0000", "#00ff00", "#0000ff"]}
      >
        <div className="flex h-full items-center justify-center">
          Custom Colors
        </div>
      </BorderGlow>
    </div>
  )
}

Radial Type

Full Glow

Reverse Rotation

import { BorderGlow } from "@/registry/aliimam/components/border-glow"

export function BorderGlowExample() {
  return (
    <div className="flex h-full w-full items-center justify-center gap-3">
      <BorderGlow height="300px" gradientType="radial" colorPreset="cyberpunk">
        <div className="flex h-full items-center justify-center">
          Radial Type
        </div>
      </BorderGlow>
      <BorderGlow height="300px" blurAmount="3rem">
        <div className="flex h-full items-center justify-center">Full Glow</div>
      </BorderGlow>
      <BorderGlow height="300px" rotationDirection="reverse">
        <div className="flex h-full items-center justify-center">
          Reverse Rotation
        </div>
      </BorderGlow>
    </div>
  )
}

Pause

import { BorderGlow } from "@/registry/aliimam/components/border-glow"

export function BorderGlowExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BorderGlow height="300px" paused={true}>
        <div className="flex h-full items-center justify-center">Pause</div>
      </BorderGlow>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://aliimam.in/r/border-glow.json

Usage

import { border-glowGrid, border-glowGridItem } from "@/components/ui/border-glow"

<border-glowGrid>
  <border-glowGridItem>Item 1</border-glowGridItem>
  <border-glowGridItem>Item 2</border-glowGridItem>
  <border-glowGridItem>Item 3</border-glowGridItem>
</border-glowGrid>

CSS

 
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
 
@keyframes glow-angle-rotate {
  to {
    --glow-angle: 1turn;
  }
}
 
.glow-border {
  border-image: var(--glow-gradient) var(--glow-spread, 1);
  animation: glow-angle-rotate var(--glow-animation-duration, 4s)
    linear infinite;
  animation-direction: var(--glow-direction, normal);
}
 
.glow-border[data-gradient-type='conic'] {
  --glow-gradient: conic-gradient(
    from var(--glow-angle),
    var(--glow-color-1),
    var(--glow-color-2),
    var(--glow-color-3),
    var(--glow-color-4),
    var(--glow-color-5),
    var(--glow-color-6),
    var(--glow-color-7),
    var(--glow-color-8),
    var(--glow-color-9),
    var(--glow-color-10),
    var(--glow-color-1)
  );
}
 
.glow-border[data-gradient-type='radial'] {
  --glow-gradient: radial-gradient(
    circle,
    var(--glow-color-1),
    var(--glow-color-5),
    var(--glow-color-9)
  );
}
 
.glow-border[data-gradient-type='linear'] {
  --glow-gradient: linear-gradient(
    90deg,
    var(--glow-color-1),
    var(--glow-color-2),
    var(--glow-color-3),
    var(--glow-color-4),
    var(--glow-color-5),
    var(--glow-color-6),
    var(--glow-color-7),
    var(--glow-color-8),
    var(--glow-color-9),
    var(--glow-color-10)
  );
}
 
@media (prefers-reduced-motion: reduce) {
  .glow-border {
    animation: none;
  }
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content inside the glow wrapper
`width`	`string`	`"100%"`	CSS width value
`height`	`string`	`undefined`	CSS height value
`aspectRatio`	`string`	`undefined`	CSS aspect-ratio value
`animationDuration`	`number`	`4`	Duration of rotation animation in seconds
`rotationDirection`	`"normal" \| "reverse"`	`"normal"`	Rotation direction
`paused`	`boolean`	`false`	Pauses animation
`hoverOnly`	`boolean`	`false`	Animates only on hover
`gradientType`	`"conic" \| "radial" \| "linear"`	`"conic"`	Type of gradient used
`gradientColors`	`string[]`	`undefined`	Custom color array (overrides preset)
`colorPreset`	Preset name	`"custom"`	Built-in gradient preset
`glowIntensity`	`number`	`1`	Controls glow opacity
`borderWidth`	`string`	`"1.25em"`	Border thickness
`blurAmount`	`string`	`"0.75em"`	Blur intensity
`inset`	`string`	`"-1em"`	Position offset of glow
`glowSpread`	`string`	`"1"`	Border-image slice value
`innerGlow`	`boolean`	`false`	Makes glow render inside container
`backgroundColor`	`string`	`undefined`	Custom background color

Bento Carousel

On This Page

Installation Usage CSS Props

savd