Effects Fancy Stable
GlowBorder
Glowing ring that animates around a container's edge by sweeping a radial gradient's position, masked with CSS mask-composite so only the border ring is painted, supporting single or multi-color gradients
Preview
svelte
<script lang="ts">
import { GlowBorder } from 'fancy-ui-svelte';
</script>
<GlowBorder />Installation
pnpm add fancy-ui-svelte
import { GlowBorder } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { GlowBorder } from 'fancy-ui-svelte';
</script>
<GlowBorder />Examples
Basic Usage
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</script>
<div class="bg-background relative flex h-40 w-64 items-center justify-center rounded-xl p-6">
<p class="text-muted-foreground text-center">Content goes here</p>
<GlowBorder />
</div>Custom Colors
Change glow colors.
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Cyan</p>
<GlowBorder color="#00ffff" />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Pink</p>
<GlowBorder color="#ff00ff" />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Gold</p>
<GlowBorder color="#ffd700" />
</div>
</div>Multi-Color Gradient
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Blue → Purple</p>
<GlowBorder color={["#3b82f6", "#8b5cf6"]} />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Rainbow</p>
<GlowBorder color={["#ff0000", "#ff7f00", "#ffff00", "#00ff00", "#0000ff", "#8b00ff"]} />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">Sunset</p>
<GlowBorder color={["#f97316", "#ec4899", "#8b5cf6"]} />
</div>
</div>Border Width
Adjust glow thickness.
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">1px</p>
<GlowBorder borderWidth={1} color="#00ffff" />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">3px</p>
<GlowBorder borderWidth={3} color="#00ffff" />
</div>
<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
<p class="text-muted-foreground text-center text-xs">5px</p>
<GlowBorder borderWidth={5} color="#00ffff" />
</div>
</div>Card Example
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</script>
<div class="bg-card relative max-w-sm rounded-2xl border p-6">
<GlowBorder borderRadius={16} color={["#3b82f6", "#8b5cf6", "#ec4899"]} borderWidth={2} />
<h3 class="mb-2 text-lg font-semibold">Premium Feature</h3>
<p class="text-muted-foreground mb-4 text-sm">
This card has a beautiful animated glow border that draws attention.
</p>
<button
class="bg-primary text-primary-foreground w-full rounded-lg px-4 py-2 text-sm font-medium"
>
Get Started
</button>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
borderRadius | number | 10 | Border radius in pixels |
color | string | string[] | "#FFF" | Glow color or array of colors for gradient |
borderWidth | number | 2 | Border width in pixels |
duration | number | 10 | Animation duration in seconds |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable