09/30/2022

How to Create an Animated Border Gradient with Tailwind CSS

Creating a nice animated border should be difficult and with Tailwind CSS... messy. However, here's the approach that I took which was easy and clean.

Faking the Border

First, we need our interactive element, for this example, I'll use an <a> to have a "border" which we are faking by using a background color and padding.

<a href="#" class="inline-block bg-white p-0.5">
  <span class="block bg-gray-900 px-5 py-3 text-white"> Get Started </span>
</a>

Inside that, we add a <span> that will have the text content of the element, as well as apply the padding that we desire for our button/link.

Adding the Gradient

Next, we need to add the gradient.

I'm going to use a pre-made Tailwind CSS gradient from Hypercolor.

We apply the gradient to the interactive element with the fake border.

<a href="#" class="inline-block bg-white from-pink-500 via-red-500 to-yellow-500 p-0.5">
  <span class="block bg-gray-900 px-5 py-3 text-white"> Get Started </span>
</a>

You might be concerned that the gradient classes added will override the bg-white but it won't, for that to happen we need to add the gradient direction class which is done on hover.

Applying the Hover Effect

We can take what we've done and add two more classes, one is a default Tailwind CSS class which is applied on hover, the other is always applied and needs some JIT magic.

<a
  href="#"
  class="inline-block bg-white from-pink-500 via-red-500 to-yellow-500 bg-[length:_400%_400%] p-0.5 hover:bg-gradient-to-r"
>
  <span class="block bg-gray-900 px-5 py-3 text-white"> Get Started </span>
</a>

Let's break these down.

hover:bg-gradient-to-r

This applies the gradient direction class only on hover which will make the gradient display instead of bg-white.

bg-[length:400%_400%]

This makes the gradient huge allowing us to apply an animation to it, without this class the gradient will appear as is and wont animate.

Animating the Gradient

Now it's time to animate.

First, we need to make some additions to our Tailwind CSS config.

theme: {
  extend: {
    animation: {
      border: 'background ease infinite',
    },
    keyframes: {
      background: {
        '0%, 100%': { backgroundPosition: '0% 50%' },
        '50%': { backgroundPosition: '100% 50%' },
      },
    },
  },
}

Here we're creating an animation with the class animate-background which is using the background object in the keyframes object. In short, this moves the gradient.

Finally, we can add the animate-background class to the interactive element with the gradient classes.

You can use hover:animate-background if preferred, but note that will reset the animation when you are no longer on hover, which can cause it to look a little jumpy.

The full example looks like this.

<a
  href="#"
  class="animate-background inline-block bg-white from-pink-500 via-red-500 to-yellow-500 bg-[length:_400%_400%] p-0.5 [animation-duration:_6s] hover:bg-gradient-to-r"
>
  <span class="block bg-gray-900 px-5 py-3 text-white"> Get Started </span>
</a>

We're making use of an arbitrary properties syntax to write [animation-duration:_6s] so we can change the animation-duration for each use of the effect.

And here is how it looks. I've added some extra classes to make the <a> look nicer.

You can see these effects in action on the following blog card components: