All Components

Animated Card Border

Learn to build unique, stunning interfaces that set you apart from the copy-paste crowd.

The AnimatedCardBorder component creates a visually engaging border around the card. The border uses a conic gradient animation that rotates around the card, creating a striking motion effect. This is a perfect way to add some flair to your UI elements.

Watch the tutorial on YouTube

Key Features:

  • Uses CSS animations to create a continuous rotating gradient border.
  • The border is created using the ::before pseudo-element and is applied to the .card-wrapper class.
  • The card content is placed inside a flexible container that is centered and styled to fit within the animated border.
  • Tailwind CSS and custom styles are used to style the component.

Let's begin by reviewing the component and the necessary CSS.

import React from "react";
import "./AnimatedCardBorder.css";
function AnimatedCardBorder() {
return (
  <div className="size-[300px] rounded-xl border border-dashed border-white/5 flex items-center justify-center p-1 hover:shadow-xl hover:shadow-white/5 duration-1000 delay-1000 ">
    <div className="h-full p-px rounded-lg relative overflow-hidden ">
      <div className="card-wrapper h-full">
        <div className="relative bg-gradient-to-b from-[#171717] to-[#252525] h-full rounded-[7px] ring-[0.5px] ring-white/10 ">
          <div className="h-full flex items-center justify-center flex-col p-4">
            <div className="flex-1 flex items-center justify-center">
            //  Your Logo / Image
            </div>
            <div className="text-xs text-center text-[#eae6e66d]">
              <span className="text-white font-medium">
                Learn to build unique,
              </span>{" "}
              stunning interfaces that set you apart from the copy-paste
              crowd.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);
}

export default AnimatedCardBorder;

The CSS file AnimatedCardBorder.css:

/* Gradient Border Animation */
.card-wrapper::before {
  content: "";
  position: absolute;
  left: -25%;
  top: -25%;
  height: 150%;
  width: 150%;
  background: conic-gradient(
    rgba(238, 92, 33, 0) 0deg,
    rgba(238, 92, 33, 1) 0deg,
    transparent 40deg
  );
  animation: border-spin 7s linear infinite;
}


/* Border Animation */
@keyframes border-spin {
  100% {
    transform: rotate(-360deg);
  }
}

This implementation creates an animated border effect using CSS and ensures that the card's contents stay centered while maintaining a sleek and modern look. The conic-gradient animation brings an extra touch of interactivity to the card's border.

Happy Coding 👋

Want to Learn How to Build These Components Yourself?

We have step-by-step tutorials for every component to help you create stunning interfaces with ease.

Tutorials on YouTube