How to use radial gradient in Tailwindcss

Radial gradients are a powerful design tool that can bring depth and focus to your web designs. While TailwindCSS offers a lot of utility classes for gradients, radial gradients require some customization. This blog will guide you through creating and using radial gradients in TailwindCSS with examples.

Radial Gradients in TailwindCSS

TailwindCSS natively supports radial gradients as of version 4. If you’re using an older version, don’t worry—custom configurations can still be used to achieve similar results.

Built-In Radial Gradient Utilities (TailwindCSS v4)

If you’re using TailwindCSS v4 or later, you can directly apply radial gradients using utility classes:

<div class="bg-radial h-32 w-32 from-pink-500 via-red-500 to-yellow-500"></div>

In this example:

• bg-radial sets the gradient type to radial.
• from-pink-500, via-red-500, and to-yellow-500 define the gradient colors and stops.

Custom Radial Gradients in TailwindCSS v3

For earlier versions, radial gradients are not provided as default utilities. You can define them in your Tailwind configuration file.

Tailwind Config Example

Here’s how to extend the backgroundImage configuration in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'custom-radial':
          'radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%)',
      },
    },
  },
}

Usage in HTML

After adding the configuration, you can use the class in your HTML like this:

<div class="bg-custom-radial h-32 w-32"></div>

This will render a radial gradient starting with a semi-transparent black color at the center, fading to white at the edges.

Inline Radial Gradients

For one-off cases, you can define radial gradients inline:

<div
  class="h-32 w-32 bg-[radial-gradient(circle,_rgba(0,0,0,0.4)_0%,_rgba(255,255,255,0)_100%)]"
></div>

This method provides flexibility without modifying your configuration file.

Advanced Customizations

Positioning the Gradient

You can control the position of the gradient’s center using the at keyword:

<div
  class="h-32 w-32 bg-[radial-gradient(circle_at_75%_25%,_rgba(0,0,0,0.4)_0%,_rgba(255,255,255,0)_100%)]"
></div>

In this example, the gradient starts at 75% horizontally and 25% vertically within the element.

Combining Gradients

Tailwind does not directly support multiple gradients, but you can use arbitrary styles:

<div
  class="h-32 w-32 bg-[radial-gradient(circle,_red,_blue),_radial-gradient(circle,_yellow,_green)]"
></div>

This combines two radial gradients for a layered effect.

FAQs

1. What version of TailwindCSS supports radial gradients?

Radial gradients are natively supported starting from TailwindCSS v4. For earlier versions, custom configurations are needed.

2. How do I animate a radial gradient?

You can use CSS animations in combination with Tailwind utilities. For example:

<div class="bg-radial h-32 w-32 animate-pulse from-pink-500 via-red-500 to-yellow-500"></div>

3. Can I use TailwindCSS to create complex gradients like mesh gradients?

Tailwind does not directly support mesh gradients, but you can achieve similar effects by layering gradients or using arbitrary styles.