Gradient Border Component

A versatile gradient border component with rounded corners that can be applied to any div or text element. Enhances content with colorful, stylish edges and modern gradient designs. Features customizable gradients, border radius, and responsive styling.

Create Group Effortlessly

Seamless chats, crystal-clear videos, and
premium audio quality

Usage

global.css

@property --border-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}

tailwind.config.ts

tailwind.config = {
  theme: {
    extend: {
      animation: {
        border: 'border 4s linear infinite',
      },
      keyframes: {
        border: {
          to: { '--border-angle': '360deg' },
        },
      },
    },
  },
};

Product-Cards Spotlight cards