Gradients in Tailwind CSS 4 – Complete Guide
Gradients are widely used in modern UI design to create visually attractive backgrounds. Instead of using a single color, gradients smoothly transition between multiple colors.
Tailwind CSS provides powerful utilities that make creating gradients easy without writing custom CSS.
Gradients are commonly used for:
- hero sections
- landing page backgrounds
- buttons
- banners
- cards
- overlays
In this tutorial you will learn:
- Gradient background basics
- Gradient directions
- Multiple color gradients
- Gradient overlays
- Button gradients
- Responsive gradient backgrounds
- Real UI examples
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Tailwind Gradient Examples
</h1>
</body>
</html>
Now you can use Tailwind gradient utilities.
Gradient Background Basics
To create gradients in Tailwind, you use three utilities:
| Utility | Purpose |
|---|---|
| bg-gradient-to-* | gradient direction |
| from-* | starting color |
| to-* | ending color |
Example – Basic Gradient
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6">
Simple Gradient Background
</div>
Explanation:
| Class | Purpose |
|---|---|
| bg-gradient-to-r | gradient direction (left → right) |
| from-blue-500 | starting color |
| to-purple-600 | ending color |
Gradient Directions
Tailwind supports multiple gradient directions.
| Class | Direction |
|---|---|
| bg-gradient-to-r | left → right |
| bg-gradient-to-l | right → left |
| bg-gradient-to-t | bottom → top |
| bg-gradient-to-b | top → bottom |
| bg-gradient-to-tr | bottom-left → top-right |
| bg-gradient-to-br | top-left → bottom-right |
Example – Vertical Gradient
<div class="bg-gradient-to-b from-green-400 to-blue-500 text-white p-6">
Vertical Gradient
</div>
Gradient flows top to bottom.
Multi-Color Gradients
You can add a middle color using via.
Example
<div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-6">
Three Color Gradient
</div>
Explanation:
| Class | Role |
|---|---|
| from-pink-500 | start color |
| via-red-500 | middle color |
| to-yellow-500 | end color |
Gradient Button Example
Gradients are often used in modern buttons.
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2 rounded-lg shadow hover:from-indigo-600 hover:to-purple-700">
Gradient Button
</button>
Features:
- gradient background
- hover gradient change
- shadow effect
Gradient Hero Section
Gradients are perfect for hero sections.
<section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-16 text-center">
<h1 class="text-4xl font-bold mb-4">
Welcome to Tailwind CSS
</h1>
<p class="text-lg">
Build modern UI faster using Tailwind utilities.
</p>
</section>
This creates a clean landing page header.
Gradient Overlay Example
Sometimes gradients are used as overlays over images.
<div class="relative h-80 bg-[url('https://picsum.photos/1200/600')] bg-cover bg-center">
<div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent"></div>
<div class="relative text-white flex items-center justify-center h-full">
<h2 class="text-3xl font-bold">
Gradient Overlay
</h2>
</div>
</div>
Explanation:
| Class | Purpose |
|---|---|
| absolute inset-0 | overlay covers entire container |
| from-black/70 | dark start |
| to-transparent | fade effect |
Gradient Card Example
<div class="bg-gradient-to-br from-purple-500 to-indigo-600 text-white p-6 rounded-lg shadow-lg w-72">
<h3 class="text-lg font-semibold mb-2">
Premium Plan
</h3>
<p class="text-sm">
Unlock all features with our premium subscription.
</p>
</div>
This creates a modern gradient card UI.
Responsive Gradient Backgrounds
Tailwind allows gradients to change across screen sizes.
<div class="bg-gradient-to-r from-blue-500 to-purple-600
md:from-green-500 md:to-blue-600
lg:from-red-500 lg:to-yellow-500
text-white p-8">
Responsive Gradient
</div>
Behavior:
| Screen | Gradient |
|---|---|
| Mobile | Blue → Purple |
| Tablet | Green → Blue |
| Desktop | Red → Yellow |
Gradient Dashboard Card Example
<div class="grid grid-cols-3 gap-6">
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white p-6 rounded">
Sales
</div>
<div class="bg-gradient-to-r from-green-500 to-teal-600 text-white p-6 rounded">
Users
</div>
<div class="bg-gradient-to-r from-pink-500 to-red-600 text-white p-6 rounded">
Orders
</div>
</div>
Common in analytics dashboards.
Why Use Gradients in Tailwind?
Modern UI Design
Gradients create visually attractive interfaces.
Easy Implementation
Tailwind gradient utilities require no custom CSS.
Flexible Color System
You can combine multiple colors easily.
Responsive Design
Gradients can change across screen sizes.
FAQs
What is a gradient in Tailwind?
A gradient is a smooth transition between two or more colors applied using Tailwind utilities.
How do I create a gradient in Tailwind?
Example:
bg-gradient-to-r from-blue-500 to-purple-600
What does via do in gradients?
via adds a middle color in the gradient.
Example:
from-blue-500 via-purple-500 to-pink-500
Can gradients be responsive?
Yes. Tailwind breakpoints allow responsive gradients.
Example:
md:from-green-500
Can gradients be used on buttons?
Yes. Gradients are commonly used for modern UI buttons.
Example:
bg-gradient-to-r from-indigo-500 to-purple-600
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.