Animated Gradient Border
An Animated Gradient Border is a decorative ui element that displays moving color gradients around a component’s edge.
Login to your account
import GradientBorder from "@/components/core/gradient-border";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function GradientBorderCardExample() {
return (
<GradientBorder>
<Card className="w-[300px]">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
</CardHeader>
<CardContent>
<form>
<div className="flex flex-col gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex-col gap-2">
<Button type="submit" className="w-full">
Login
</Button>
</CardFooter>
</Card>
</GradientBorder>
);
}
Installation
Install the following dependencies:
npm install clsx tailwind-mergeCopy and paste the following code into your project:
import React from "react";
import { cn } from "@/lib/utils";
export type Props = {
children: React.ReactNode;
className?: string;
};
export default function GradientBorder({ children, className }: Props) {
return (
<div
className={cn(
"animate-border overflow-hidden rounded-xl border border-transparent [background:linear-gradient(45deg,transparent,transparent_50%,transparent)_padding-box,conic-gradient(from_var(--border-angle),transparent_80%,_theme(colors.indigo.500)_86%,_theme(colors.indigo.700)_90%,_theme(colors.indigo.500)_94%,_theme(colors.slate.600/.48))_border-box]",
className
)}>
{children}
</div>
);
}
Update the import paths to match your project setup.
Usage
import GradientBorder from "@/components/core/gradient-border";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function GradientBorderCardExample() {
return (
<GradientBorder>
<Card className="w-[300px]">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
</CardHeader>
<CardContent>
<form>
<div className="flex flex-col gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex-col gap-2">
<Button type="submit" className="w-full">
Login
</Button>
</CardFooter>
</Card>
</GradientBorder>
);
}
Image
import GradientBorder from "@/components/core/gradient-border";
export default function GradientBorderImageExample() {
return (
<GradientBorder className="border-2 [background:linear-gradient(45deg,transparent,transparent_50%,transparent)_padding-box,conic-gradient(from_var(--border-angle),transparent_80%,_theme(colors.orange.500)_86%,_theme(colors.orange.700)_90%,_theme(colors.orange.500)_94%,_theme(colors.orange.600/.48))_border-box]">
<img
width="300"
src="https://images.unsplash.com/photo-1502526830269-3bf50994d57c?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</GradientBorder>
);
}
Props
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
className? | string | - |