Linear, Radial and Conic Gradients with Tailwind CSS

Image may be NSFW.
Clik here to view.

Tailwind CSS offers default utility classes to create linear gradients quickly and easily, but not for radial or conic gradients. In this quick guide, we’ll see how to create all 3 types of gradients efficiently, using arbitrary values for the last two.

Linear gradients

Image may be NSFW.
Clik here to view.

Creating a linear gradient with Tailwind CSS is super simple and well-documented. In short, you need to define:

• The gradient direction – For example, using the class bg-gradient-to-b (“b” stands for “bottom”) we’ll define a gradient that goes from top to bottom.
• The starting color stop – For example, from-rose-100
• The middle color stop – For example, via-pink-400
• The ending color stop – For example, to-purple-500

Keep in mind that not all color stops are necessary, but at least one between from and to must be present.

Radial gradients

Image may be NSFW.
Clik here to view.

Now things get more interesting. A radial gradient starts from a central point and expands outward, like the rays of the sun. Tailwind doesn’t have a ready-made class for this, but we can create one on the fly: bg-[radial-gradient(closest-side,theme(colors.rose.100),theme(colors.pink.400),theme(colors.purple.500))].

The bg- prefix tells Tailwind we’re working with the background-image property. Inside the square brackets, we can insert any valid CSS value, with one small trick: we need to replace spaces with underscores. This allows Tailwind to correctly interpret the value.

In our example, we used the theme() function which allows us to directly access colors from the Tailwind palette, maintaining consistency with the rest of our design system.

Now, let’s see how we can further simplify the use of this class. We can adopt an approach similar to what we use for linear gradients, making the code more familiar and easier to manage. Here’s how: bg-[radial-gradient(closest-side,var(--tw-gradient-stops))].

This class allows us to manage color stops exactly as we do for linear gradients, using the prefixes from-, via- and to-. So, to create a radial gradient, we’ll apply the following classes:

• bg-[radial-gradient(closest-side,var(--tw-gradient-stops))]
• from-rose-100
• via-pink-400
• to-purple-500

An important detail to note is the use of closest-side as the position value, instead of circle. If we’re showing the gradient in a circular element, we want the gradient to start from the edge of the circle, not from the corners of the square containing it. Using closest-side, we get exactly this effect: the gradient perfectly adapts to the circular shape, creating a more harmonious and precise visual effect.

Conic gradients

Image may be NSFW.
Clik here to view.

A conic gradient, also called angular gradient in some apps, rotates around a central point like the hands of a clock. Here’s how to create it, based on the same principle as radial gradients:

• bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))]
• from-rose-100
• via-pink-400
• to-purple-500

In our example, we also rotated the starting point of the gradient by 180 degrees, so the class is modified to bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))].

Extending the Tailwind theme (optional)

If you often use these gradients, you can create custom classes for them in the tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

Now you can use bg-gradient-radial and bg-gradient-conic instead of their longer arbitrary value counterparts. This can make your HTML cleaner and more readable.

However, as a developer, I often question whether this extra configuration step is truly necessary. With the introduction of arbitrary variants in Tailwind, we now have the flexibility to create these gradients on the fly without extending the theme.

Consider the following:

1. How often will you use these gradient classes in your project?
2. Does the slight increase in readability outweigh the time spent configuring and maintaining the theme extension?
3. Will other developers on your team benefit from these custom utilities, or might they cause confusion?

In many cases, I find that using arbitrary values directly in the HTML is more straightforward and doesn’t require maintaining additional configuration. It keeps all the styling information in one place and leverages Tailwind’s built-in flexibility. Last but not least, you can copy and paste code from one project to another without worrying about theme cofiguration!

The post Linear, Radial and Conic Gradients with Tailwind CSS appeared first on Cruip.