How To Add Gradient Background With Tailwind?

Last Updated : 06 Sep, 2024

Gradient backgrounds are a common design element that can give your website depth and visual appeal. You can make both linear and radial gradients with Tailwind CSS without writing any custom CSS. With minimal effort, you can apply stunning gradients to your elements by using Tailwind's utility classes, which streamline the process.

Approach To Add Gradient Background With Tailwind

You can use the bg-gradient-to-classes Tailwind provides to create a linear gradient background.

Choose Gradient Direction: Tailwind CSS provides several predefined directions for linear gradients

bg-gradient-to-t (top)
bg-gradient-to-b (bottom)
bg-gradient-to-l (left)
bg-gradient-to-r (right)

Select Gradient Colors: Use the from-*, via-*, and to-* classes to define the colors for your gradient. For example:

from-blue-500 (starting color)
via-purple-500 (middle color)
to-pink-500 (ending color)

Combine Classes: Apply these classes to your element. For example:

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 h-64 w-full">
    <!-- Content goes here -->
</div>

Example: This demonstrates a centered heading with a linear gradient background using Tailwind CSS, spanning a full-width and a fixed height.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center">
    <div
        class="bg-gradient-to-r from-blue-500 via-purple-500
               to-pink-500 h-64 w-full flex items-center justify-center text-white">

        <h1 class="text-2xl">Linear Gradient Background</h1>
    </div>
</body>

</html>

Output:

Screenshot-2024-09-05-001754 — Add Gradient Background With Tailwind

Example: This example illustrates a full-screen web page with a custom linear gradient background, centered text, and a call-to-action button using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linear Gradient Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Optional: Custom Tailwind CSS configuration for gradient background */
        @layer utilities {
            .bg-gradient-custom {
                background-image: linear-gradient(to right, #1e3a8a,
                        #6d28d9, #ec4899);
            }
        }
    </style>
</head>

<body>
    <section class="bg-gradient-custom h-screen flex 
    items-center justify-center text-center">
        <div class="text-white">
            <h1 class="text-5xl font-bold mb-4">
                Discover the Future of Web Design
            </h1>
            <p class="text-xl mb-8">
                Leverage the power of modern CSS
                frameworks to create stunning,
                responsive designs with ease.
            </p>
            <a href="#" class="bg-white text-blue-900
             hover:bg-gray-100 font-semibold py-2 px-6
              rounded-lg transition-colors duration-300">
                Get Started
            </a>
        </div>
    </section>
</body>

</html>

Output:

Linear-gradient — Add Gradient Background With Tailwind

How to Animate Gradient Background Smoothly Using CSS ?

heysaiyad

Improve

Article Tags :

How To Add Gradient Background With Tailwind?

Approach To Add Gradient Background With Tailwind

Similar Reads

Thank You!

What kind of Experience do you want to share?