How to use gradients in Tailwind CSS

Flat colors are fine, but sometimes your design needs a little more depth. That's where gradients come in.

A gradient smoothly transitions between two or more colors, creating visual interest without adding extra elements or complexity to your markup. You see them everywhere in modern design – from subtle background fades to bold hero sections that really grab attention.

Tailwind CSS makes working with gradients incredibly straightforward. No need to remember complex CSS syntax or write custom classes. Just combine a few utility classes and you're done.

Let me show you exactly how gradients work in Tailwind and how to use them in your projects.

Creating basic linear gradients

Linear gradients are the most common type you'll use. They transition colors in a straight line – left to right, top to bottom, or at an angle.

Tailwind gives you eight directional utilities out of the box. The class bg-linear-to-r creates a left-to-right gradient, bg-linear-to-b goes top to bottom, and so on. You've got all the cardinal directions plus diagonals covered.

But here's the thing – the direction class alone doesn't do much. You need to tell Tailwind which colors to use. That's where from- and to- utilities come in.

Combine them like this: bg-linear-to-r from-purple-500 to-pink-500 and boom, you've got a nice purple-to-pink gradient flowing from left to right.

```html

```

Let me show you a few different directions so you can see how they work:

```html

  

    Left to Right
  
  

    Top to Bottom
  
  

    Diagonal (Bottom Right)
  

```

Each direction creates a totally different feel. Horizontal gradients work great for headers and hero sections. Vertical gradients are perfect for page backgrounds or card overlays. And diagonal gradients? They add that extra bit of dynamic energy to your designs.

Adding intermediate colors with via

Two-color gradients are nice, but sometimes you need more complexity. Maybe you want to transition through three colors instead of just two. That's what the via- utility does.

Think of via- as adding a middle stop between your starting and ending colors. It creates a smoother, more interesting transition that passes through an additional color on the way.

The syntax is simple – just add via-{color} between your from- and to- utilities. So bg-linear-to-r from-purple-500 via-pink-500 to-red-500 creates a gradient that flows from purple through pink to red.

```html

  

    
Two colors
    

  
  

    
Three colors with via
    

  

```

See the difference? The three-color version has a richer, more nuanced transition. The purple in the middle adds depth and makes the gradient feel more sophisticated.

This technique works really well for creating sunset effects, brand-specific color schemes, or just adding more visual interest to backgrounds and UI elements.

```html

  
Sunset Vibes

```

That gradient right there? Perfect for hero sections, promotional banners, or anywhere you want to make a bold statement. The three-color transition mimics a natural sunset way better than just two colors ever could.

Controlling gradient positions

By default, Tailwind spreads your colors evenly across the gradient. The starting color begins at 0%, any via colors sit at 50%, and the ending color finishes at 100%.

But what if you want more control? What if you need your colors compressed into a smaller area or spread out differently?

That's where position utilities come in. You can add percentage values to your color stops using the same utility names – from-10%, via-30%, to-90%, and so on.

This gives you precise control over where each color appears in the gradient. Want a sharp transition? Bring the colors closer together. Need a subtle fade? Spread them further apart.

```html

  

    
Default positioning (evenly spaced)
    

  
  

    
Custom positioning (compressed in middle)
    

  

```

See how the second gradient has more blue and pink on the edges? The positioning creates a totally different visual effect even though we're using the same three colors.

Here's a practical example where positioning really shines. You can create a gradient border effect by pushing colors to the edges:

```html

  

  

    
Card with Gradient Edge
    
Notice the subtle cyan glow on the left side? That's positioning at work.
  

```

By compressing the color into just the first 20% of the gradient and making everything else transparent, we get a nice accent effect that draws attention without overwhelming the content.

Using radial and conic gradients

Linear gradients are great, but they're not the only option. Tailwind also supports radial and conic gradients, which open up completely different design possibilities.

Radial gradients spread out from a center point in a circular pattern. Instead of bg-linear-to-r, you use bg-radial. The colors radiate outward from the center, creating a spotlight or vignette effect.

```html

  
Radial Spotlight

```

You can even control where the center of the radial gradient sits using arbitrary values like bg-radial-[at_25%_25%] to position the focal point in the top-left corner instead of dead center.

Conic gradients are different again. They rotate around a center point like a color wheel. Use bg-conic with your color stops, and the colors sweep around in a circle.

```html

  
Conic Rotation

```

Conic gradients work really well for progress indicators, color pickers, or decorative elements. They're not as commonly used as linear gradients, but when you need that rotating effect, nothing else will do.

Here's a comparison showing all three types side by side:

```html

  

    
Linear
    

  
  

    
Radial
    

  
  

    
Conic
    

  

```

Each type has its own personality. Linear feels directional and dynamic. Radial creates focus and depth. Conic brings energy and movement.

Creating custom gradient angles

The preset directions like bg-linear-to-r and bg-linear-to-br cover most use cases, but sometimes you need precise control over the angle.

Maybe you want a 45-degree angle, or 135 degrees, or some other specific direction that doesn't match the built-in options. That's when bg-linear-<angle> syntax becomes your friend.

Just use bg-linear-45 for a 45-degree gradient, or bg-linear-217 for 217 degrees. The angle works just like CSS – 0 degrees points straight up, 90 degrees points right, and so on around the circle.

```html

  

    
45 degrees
    

  
  

    
135 degrees
    

  

```

The really cool part? You can combine custom angles with all the other gradient features we've covered – via colors, positioning, everything.

For arbitrary angle values that arent round numbers, use square bracket notation like bg-linear-[217deg]:

```html

  
Custom Everything

```

This gradient uses a 217-degree angle, three colors, and custom positioning for the via stop at 40%. That level of control lets you match any design comp or brand guideline exactly.

When you need a gradient at a specific angle to complement your layout or match a design system, custom angles give you that precision.

That's everything you need to know about using gradients in Tailwind CSS!

From basic two-color linear gradients to complex multi-color effects with custom positioning and angles, Tailwind gives you all the tools to create beautiful color transitions without touching custom CSS.

Start with the simple stuff – pick a direction, add your from and to colors, and see how it looks. Then experiment with via colors, positioning, and different gradient types until you find what works for your design.

The best part? All of this works with Tailwind's responsive prefixes too. You can have different gradients at different breakpoints, change colors on hover, or even animate gradient transitions with a bit of creativity.

Go add some gradients to your project and watch how much more polished everything looks!