How to use Radial Gradient in Tailwind CSS ?

Last Updated : 01 Apr, 2024

A radial gradient is a graphical effect where colors are arranged in a circular or elliptical pattern. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified. We will see how we can achieve this effect in Tailwind CSS.

We can use the below approaches to achieve a Radial gradient in Tailwind CSS:

Table of Content

The Radial Gradient in Tailwind CSS as a Circle
The Radial Gradient in Tailwind CSS as an Ellipse

The Radial Gradient in Tailwind CSS as a Circle

A radial gradient as a circle will make a circle with a color and the other color fades to the end towards the edge. Fade happens at an equal rate until specified. The bg-[ ] is used to set the arbitrary value to the background. The radial-gradient() function is used to set the radial gradient.

Example: Implementation of using radial gradient in Tailwind CSS as a circle.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Radial Gradient</title>
    <script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col 
             items-center">

    <h3 class="text-center
               text-2xl 
               text-green-800"> 
      Radial Gradient as a Circle
      </h3>
    <div class="container grid grid-cols-2 gap-8 p-4">
        <div class="box border-4 border-red-600 
                    bg-[radial-gradient(circle_at_center,
                    _var(--tw-gradient-stops))]  
                    from-teal-300 via-gray-100  
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl"> 
              circle at center
            </h3>
        </div>
        <div class="box border-4 border-red-600 
                    bg-[radial-gradient(circle_at_top,
                    _var(--tw-gradient-stops))]   
                    from-teal-300 via-gray-100  
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl"> 
              circle at Top
              </h3>
        </div>
        <div
            class="box border-4 border-red-600  
                   bg-[radial-gradient(circle_at_bottom,
                   _var(--tw-gradient-stops))]
                   from-teal-300 via-gray-100 to-blue-300">
            <h3 class="mb-4 p-12 text-2xl">
              circle at bottom 
              </h3>
        </div>

        <div class="box border-4 border-red-600   
                    bg-[radial-gradient(circle_at_top_left,
                    _var(--tw-gradient-stops))]
                    from-teal-300 via-gray-100  
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl"> 
              circle at top Left
              </h3>
        </div>
    </div>
</body>

</html>

Output:

Output

The Radial Gradient in Tailwind CSS as an Ellipse

A radial gradient as an ellipse will create an ellipse with a color and the other color fades to the end towards the edge. Fade happens at an equal rate until specified. The bg-[ ] class sets arbitrary background values, while the radial-gradient() function defines radial gradients with parameters like shape positions. Additionally, _var(–tw-gradient-stops) dynamically sets color stops. The color values like from-teal-300, via-gray-100, and to-blue-300 specify the color transitions within the radial gradients.

Example: Implementation of using radial gradient in Tailwind CSS as an Ellipse.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Radial Gradient</title>
    <script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col
             items-center">

    <h3 class="text-center
               text-2xl 
               text-green-800"> 
      Radial Gradient as an Ellipse 
      </h3>
    <div class="container grid 
                grid-cols-2 gap-8 p-4">
        <div
            class="box border-4 border-red-600 
                   bg-[radial-gradient(ellipse_at_center,
                   _var(--tw-gradient-stops))]  
                   from-teal-300 via-gray-100  
                   to-blue-300">
            <h3 class="mb-4 p-12 text-2xl">
              Ellipse at center
            </h3>
        </div>
        <div class="box border-4 border-red-600 
                    bg-[radial-gradient(ellipse_at_top,
                    _var(--tw-gradient-stops))]
                    from-teal-300 via-gray-100  
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl"> 
              Ellipse at Top
              </h3>
        </div>
        <div class="box border-4 border-red-600  
                    bg-[radial-gradient(ellipse_at_bottom,
                    _var(--tw-gradient-stops))]
                    from-teal-300 via-gray-100  
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl">
              Ellipse at bottom 
              </h3>
        </div>

        <div class="box border-4 border-red-600   
                    bg-[radial-gradient(ellipse_at_top_left,
                    _var(--tw-gradient-stops))]
                    from-teal-300 via-gray-100 
                    to-blue-300">
            <h3 class="mb-4 p-12 text-2xl"> 
              Ellipse at top Left
              </h3>
        </div>
    </div>
</body>

</html>