StackBits - React UI & Full-Stack Code Library

Cards > Moving Border Card

🥶 Moving Border Card

The MovingBorderCard component wraps its content with a stylish animated border effect. It accepts children (content inside the card), along with optional wrapper and card-specific class names for customization. Ideal for highlighting key information with a modern, dynamic look. 🚀✨

Preview

Premium Card

The dynamic moving border adds a touch of elegance and modernity.

Follow below steps 👇🏻

Styles

Add these styles in your .css file

1.moving-border-card {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  background: linear-gradient(var(--angle), transparent 90%, #ffffff 90%);
6  animation: moveGradient 4s linear infinite;
7}
8
9@property --angle {
10  syntax: '<angle>';
11  initial-value: 0deg;
12  inherits: false;
13}
14
15@keyframes moveGradient {
16  to {
17    --angle: 360deg;
18  }
19}

Component

Create a file moving-border-card.tsx in your components folder and paste this code

1import React from 'react';
2        
3const MovingBorderCard = ({
4    children,
5    wrapperClassName,
6    className
7}: {
8    children?: React.ReactNode;
9    wrapperClassName?: string;
10    className?: string;
11}) => {
12    return (
13    <div className={`moving-border-card p-[3px] ${wrapperClassName}`}>
14        <div className={`flex items-center justify-center relative ${className}`}>{children}</div>
15    </div>
16    );
17};
18
19export default MovingBorderCard;

Usage

1<MovingBorderCard
2  wrapperClassName="rounded-xl"
3  className="h-[250px] w-[300px] bg-gradient-to-br from-gray-700 via-gray-800 to-black text-white shadow-xl rounded-lg p-6"
4>
5  <div className="flex flex-col items-center justify-center h-full">
6    <h2 className="text-2xl font-semibold mb-2">Premium Card</h2>
7    <p className="text-center mb-4 text-gray-300">
8      The dynamic moving border adds a touch of elegance and modernity.
9    </p>
10    <button className="mt-auto bg-white text-black px-4 py-2 rounded-full shadow-md hover:bg-gray-200 transition-colors">
11      Learn More
12    </button>
13  </div>
14</MovingBorderCard>

⭐️ Got a question or feedback?
Feel free to reach out!