Tailwind CSS Border Gradients Tutorial

Adding a gradient to a container is relatively straightforward with Tailwind CSS utility classes, but what happens when you want to address just the border? In this article, we’ll create a neat effect using gradients on the border of a button element using Tailwind CSS.

Adding a tailwind CSS border gradient isn’t technically possible with the current CSS standard and Tailwind CSS features.

Getting to this effect requires a few hacks, but nothing too cumbersome to use on your website or apps.

Let’s start by adding a Tailwind CSS border gradient to a button element centered on the screen for demo purposes.

View the final result:
https://play.tailwindcss.com/gNy6sBE4Om

Adding an initial gradient

We need a container to kick things off. This will serve as the gradient source.

<div class="mx-auto flex h-screen w-screen items-center justify-center bg-gray-900">
  <button class="group relative flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 via-red-500 to-yellow-500 p-[1.5px] text-white transition duration-300 ease-in-out hover:bg-gradient-to-l hover:shadow-lg hover:shadow-purple-600/20 hover:transition">
      Click me
  </button>
</div>

The outer div uses the flex display property, along with some minimum heights and widths, to make the effect more easily visible.

The inner button represents the gradient portion. Feel free to customize the colors and height. We need a rigid height and width for best results.

Inner button styling

We need to extend the inner button to match our body color or the color of your container. Here’s the extended code with some bells and whistles.

<div class="mx-auto flex h-screen w-screen items-center justify-center bg-gray-900">
  <button class="group relative flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 via-red-500 to-yellow-500 p-[1.5px] text-white transition duration-300 ease-in-out hover:bg-gradient-to-l hover:shadow-lg hover:shadow-purple-600/20 hover:transition">
    <div class="flex h-full w-full items-center rounded-full bg-gray-900 from-gray-700 to-gray-900 text-center font-medium tracking-tight transition ease-in-out hover:transition group-hover:bg-gradient-to-br">
      <div class="w-full">Click me</div>
    </div>
  </button>
</div>

Conclusion

There are lots of divs, but the effect is pretty neat. The border maintains the gradient while the button itself remains with a solid background. I added a shadow effect on hover to make it more fancy. You could go crazy here with more advanced animations and sprinkles of JavaScript, should you need to. Keep performance in mind!