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

Get started for freeTalk to us