Creating Beautiful Animated Gradient Border Components in React

Full code example

import React from 'react';
import { Percent, Heart, Star, Send } from 'lucide-react';

const GradientBorderExamples = () => {
  return (
    <div className="space-y-8 p-6">
      {/* Basic Button */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">Basic Gradient Border</h3>
        <button className="relative inline-flex overflow-hidden rounded-lg p-[2px] focus:outline-none active:scale-95 transition">
          <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#ff9a00_0%,#ff4d4f_50%,#ff6db6_100%)]" />
          <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-white px-4 py-2 text-sm font-medium text-orange-600 backdrop-blur-3xl">
            Basic Button
          </span>
        </button>
      </div>

      {/* Icon Button */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">With Icon</h3>
        <button className="relative inline-flex overflow-hidden rounded-lg p-[2px] focus:outline-none active:scale-95 transition">
          <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#2dd4bf_50%,#a855f7_100%)]" />
          <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-white px-4 py-2 text-sm font-medium text-blue-600 backdrop-blur-3xl gap-2">
            Share Now
            <Send size={16} />
          </span>
        </button>
      </div>

      {/* Card Example */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">Gradient Border Card</h3>
        <div className="relative inline-flex overflow-hidden rounded-lg p-[2px] focus:outline-none">
          <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#ec4899_0%,#8b5cf6_50%,#06b6d4_100%)]" />
          <div className="inline-flex flex-col w-full h-full rounded-lg bg-white p-4 backdrop-blur-3xl">
            <h4 className="text-lg font-semibold text-gray-800">Premium Plan</h4>
            <p className="text-gray-600 mt-2">Get access to all premium features</p>
            <div className="flex items-center gap-2 mt-4">
              <Star className="text-yellow-500" size={20} />
              <span className="text-gray-700">4.9 Rating</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GradientBorderExamples;

Understanding the Core Concept

The key to creating these animated gradient borders involves a few clever CSS techniques:

1. A container with relative positioning and overflow hidden

2. An absolutely positioned pseudo-element with a rotating gradient

3. A content wrapper with background color and backdrop blur

Basic Button Implementation

Here's how to create a basic gradient border button:

<button className="relative inline-flex overflow-hidden rounded-lg p-[2px] focus:outline-none active:scale-95 transition">
  <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#ff9a00_0%,#ff4d4f_50%,#ff6db6_100%)]" />
  <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-white px-4 py-2 text-sm font-medium text-orange-600 backdrop-blur-3xl">
    Button Text
  </span>
</button>

Customization Options

1. Gradient Colors

You can customize the gradient by modifying the color stops in the conic-gradient:

bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#2dd4bf_50%,#a855f7_100%)]

2. Animation Speed

Adjust the animation duration by modifying the animate-[spin_2s_linear_infinite] class. For example, to make it slower:

animate-[spin_3s_linear_infinite]

3. Border Width

Change the border width by adjusting the padding in the outer container:

p-[3px]  /* Thicker border */
p-[1px]  /* Thinner border */

Creating Cards with Gradient Borders

You can apply the same technique to cards:

<div className="relative inline-flex overflow-hidden rounded-lg p-[2px]">
  <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(...)]" />
  <div className="inline-flex flex-col w-full h-full rounded-lg bg-white p-4 backdrop-blur-3xl">
    {/* Card content */}
  </div>
</div>

Best Practices

1. Performance: Use transform-gpu for better performance on the animated element

2. Accessibility: Ensure sufficient color contrast for text

3. Responsiveness: Use appropriate padding and sizing units

4. Interactive States: Add hover and focus states for better UX

Tips for Advanced Customization

1. Variable Gradients: Use CSS variables to dynamically change gradients

2. Hover Effects: Add hover states to change animation speed or gradient colors

3. Direction: Modify the gradient's starting angle for different rotation effects

4. Content Styling: Customize the inner content with icons, images, or complex layouts

I've included a complete example component above that demonstrates various implementations of these concepts. Feel free to mix and match these techniques to create your own unique designs!

Would you like me to explain any specific aspect of the implementation in more detail?