How to make animated borders with Tailwind

When visiting a website, you might've seen a border with a gradient effect that rotates around the edge of a certain container. Something like this:

Pretty cool, right? Let's see how we can implement this effect with Tailwind CSS.

How does it work?

I had to apply this effect to a certain section of my company's website. At first, I was busy trying to figure out how this was possible. However, I found out that I could use a combination of multiple stacked elements to achieve this effect.

There are three layers of elements that are needed:

1. The container element
2. The animated element
3. The cover element

The container element

The container element is the outermost element. We define the size and the border thickness.

Noice, we created a simple 96px X 96px container.

The animated element

This is the main part of the effect. What we need to do is create an element with a gradient background. For the gradient, we will use something called a conic gradient. The special thing about conic gradients is that they rotate around a single center point. For example, like this:

<div className="mx-auto h-24 w-24 rounded-md bg-conic from-transparent to-blue-600/70" />

At a certain center point, the gradient starts from the color set to from and ends at the color set to to. In our case, the gradient starts from transparent and ends at blue-600/70.

Keeping this in mind, we can customize our conic gradient like this:

<div className="flex h-54 w-full items-center justify-center rounded-md bg-gray-900">
  <div className="relative h-24 w-24 rounded-md bg-gray-800">
    <div className="absolute h-full w-full bg-conic from-transparent from-75% to-blue-600/70 to-100%" />
  </div>
</div>

The conic gradient starts from 75% (270 degrees) of the container and ends at 100% (360 degrees) of the container. The colors go from transparent to blue-600/70. Because our rotating animation will be clockwise, we want the "front" part of the border to be fully colored.

Now let's add a rotating effect!

<>
  <style>
    {`
      @keyframes border-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .animate-border-spin {
        animation: border-rotate 6s linear infinite;
      }
    `}
  </style>

  <div className="flex h-54 w-full items-center justify-center rounded-md bg-gray-900">
    <div className="relative h-24 w-24 rounded-md bg-gray-800">
      <div className="animate-border-spin absolute h-full w-full bg-conic from-transparent from-75% to-blue-600/70 to-100%" />
    </div>
  </div>
</>

Okay, nice! We're almost there. However, from the animation above, we can see that the gradient element doesn't cover the container element at certain points and angles. This will create a "hole" in the border during the rotating animation. To fix this, we can slightly bump up the size of the gradient element like this:

<div className="animate-border-spin absolute top-[-25%] left-[-25%] h-[150%] w-[150%] bg-conic from-transparent from-75% to-blue-600/70 to-100%" />

Because we increase the size of the gradient element, we also have to adjust the position.

To hide the overflowing parts of the gradient element, we can add a overflow-hidden class to the container element.

The cover element

Finally, we cover the container element with the container element itself. We can adjust the border thickness by changing the value of the padding value of the container element.

You can customize it more!

Great job! You now know how to make those fancy animated borders. But you can customize it more! You can change the colors and lengths of the gradients as well :D