Skip to main content

Overview

The Glow Border component creates an animated glowing border effect that can use single or multiple colors. Perfect for highlighting important UI elements with an eye-catching animated border.

Installation

Add the following entry to the inline theme in your main.css file:
@theme inline {
  --animate-glow: glow var(--duration) infinite linear;
  @keyframes glow {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

Usage

<GlowBorder
  :duration="10"
  :color="['#FFAA40', '#9C40FF']"
  :borderRadius="10"
  :borderWidth="2"
>
  <div class="p-8">
    Your content here
  </div>
</GlowBorder>

Props

duration
number
default:"10"
Duration of the glowing border animation.
color
string | string[]
default:"#FFF"
Color or array of colors to applied on the glowing border.
borderRadius
number
default:"10"
Radius of the border.
borderWidth
number
default:"2"
Width of the border.

Credits

Credits to Magic UI for this fantastic component.

Build docs developers (and LLMs) love