How To Make A Button Linear Gradient Color Border In Tailwind CSS?

Last Updated : 09 Apr, 2025

Creating visually appealing buttons can significantly enhance the user interface of your web application. One popular design trend is the use of linear gradient borders. In this article, we'll explore how to make a button with a linear gradient color border using Tailwind CSS.

A button with a linear gradient color border can add a visually appealing and modern touch to your web design. The gradient border creates a smooth transition between two or more colors, giving depth and interest to the button's appearance. This effect is not directly available as a utility class in Tailwind CSS, but we can achieve it using a combination of Tailwind classes and custom CSS.

These are the following approaches:

Using Custom CSS with Tailwind Utilities

This approach involves writing custom CSS to create the gradient effect while using Tailwind utilities for other styling aspects.

Syntax:

<element class="gradient-border">...</element>

Example: In the below example, we are demonstrating Custom CSS using Tailwind Utilities. This tells how to create a button with a gradient border using Tailwind CSS for utility classes and custom CSS for the gradient border effect.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">
    <style>
        .gradient-border {
            position: relative;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            overflow: hidden;
            background-color: transparent;
        }

        .gradient-border::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, rgb(25, 102, 64), rgb(65, 233, 130));
            z-index: -1;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">GeeksforGeeks</h1>
    <b>Using Custom CSS with Tailwind Utilities</b>
    <div class="mx-10">
        <button class="relative inline-block py-2 px-4 text-white
                       bg-transparent rounded gradient-border">
            Gradient Border Button
        </button>
    </div>
</body>

</html>

Output:

Utilizing Tailwind Arbitrary Value Feature

This feature allows you to add custom values directly in your Tailwind configuration or within your HTML, though it may require additional CSS for the gradient effect.

Syntax:

<element class="border-4 border-gradient">...</element>

Example: In the below example, we are demonstrating Custom CSS using Arbitary Value Features. The below given HTML document showcases a button with a gradient border and background using Tailwind CSS and custom CSS.