Background Gradients
Build linear gradients using bg-gradient-to-* and from-*/via-*/to-* color stops for rich visual effects.
Background Gradients is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction to CSS Gradients
A gradient transitions smoothly between two or more colors. In CSS, linear gradients go in a straight line while radial gradients radiate from a center point. Gradients add visual depth, create the impression of lighting, and help pages feel less flat. Tailwind makes creating linear gradients straightforward with a composable set of utility classes.
bg-gradient-to-* Direction Classes
Tailwind's gradient direction utilities follow compass directions. bg-gradient-to-r goes left to right, bg-gradient-to-b top to bottom, bg-gradient-to-br top-left to bottom-right. These eight direction utilities cover all the angles you will typically need. Apply one as the base gradient class, then specify colors with stop utilities.
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-16"></div>
<div class="bg-gradient-to-b from-sky-400 to-blue-600 h-16"></div>
<div class="bg-gradient-to-br from-green-400 to-teal-600 h-16"></div>
<div class="bg-gradient-to-tr from-indigo-500 to-sky-500 h-16"></div>from-* and to-* Color Stops
Define where a gradient starts and ends using from-{color}-{shade} and to-{color}-{shade}. The gradient transitions smoothly from the from-* color at one edge to the to-* color at the other. You can use any color from Tailwind's palette for both stops, or mix color families for vibrant cross-hue gradients.
<!-- Same-family gradient: depth -->
<div class="bg-gradient-to-r from-blue-400 to-blue-700 h-16"></div>
<!-- Cross-family gradient: vivid effect -->
<div class="bg-gradient-to-r from-violet-600 to-pink-600 h-16"></div>
<!-- Neutral to color: subtle fade -->
<div class="bg-gradient-to-b from-white to-gray-100 h-16"></div>Adding a via-* Midpoint Stop
Add a middle color stop with via-{color}-{shade} to create a three-color gradient. The gradient transitions from from-* through via-* to to-*. This enables sunset-style gradients and rainbow effects. You can also use via-transparent to create an interesting fade-in and fade-out with a transparent midpoint.
<!-- Three-stop gradient: sunset effect -->
<div class="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-600 h-16"></div>
<!-- Via transparent: fade in and fade out -->
<div class="bg-gradient-to-r from-indigo-600 via-transparent to-indigo-600 h-16"></div>Gradient Stops With Opacity
Combine gradient stops with the slash opacity modifier for semi-transparent gradients. from-blue-600/0 to-blue-600 creates a gradient that fades from fully transparent to fully opaque — great for overlays on images or creating a frosted glass effect that shows the content behind it at the edges.
<!-- Image with gradient overlay for text readability -->
<div class="relative h-64">
<img src="photo.jpg" class="absolute inset-0 w-full h-full object-cover" alt="" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-black/0"></div>
<h2 class="absolute bottom-4 left-4 text-white font-bold text-xl">Card Title</h2>
</div>Hero Section With Gradient Background
Gradients are most commonly used on hero sections to create visual interest behind headline text. A subtle bg-gradient-to-br from-indigo-50 to-white gives a clean, modern look. A bold bg-gradient-to-r from-purple-700 to-indigo-700 creates a full-bleed dark hero for SaaS applications. The key is ensuring sufficient text contrast over the gradient.
<!-- Dark hero with gradient -->
<section class="bg-gradient-to-r from-purple-700 to-indigo-700 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-white mb-4">Ship Faster</h1>
<p class="text-indigo-200 text-xl">Built with Tailwind CSS.</p>
</div>
</section>Card Gradient Borders
Create the illusion of a gradient border by nesting elements. Apply the gradient as the outer element's background, then place an inner element with a white or dark background and a small margin. The outer gradient background is exposed as a visible border. This technique requires no custom CSS and works reliably across all browsers.
<div class="p-0.5 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500">
<div class="bg-white rounded-xl p-6">
<h3 class="font-bold text-gray-900">Gradient Border Card</h3>
<p class="text-gray-500 text-sm">Content inside with a colorful border.</p>
</div>
</div>Gradient Text (Recap and Extension)
Gradient text applies a linear gradient to the text fill color using bg-gradient-to-r from-* to-* combined with bg-clip-text text-transparent. This technique clips the background gradient to the text shape, making gradient the visible color of the characters. It works best on large, bold headings where the gradient transition is clearly visible.
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
Gradient Text Headline
</h2>
<!-- Three-color gradient text -->
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
Vibrant Three-Stop Gradient
</h2>Animated Gradients
While Tailwind cannot animate gradient positions directly (CSS does not support transitioning gradient stops natively), you can achieve animated gradient effects by animating background-size. Set bg-[length:200%_auto] and animate with a custom CSS animation to create a flowing gradient shimmer. This pattern is common in loading skeletons and premium design highlights.
/* In your CSS -- custom animation for gradient movement */
@keyframes gradient-x {
0%, 100% { background-position: left center; }
50% { background-position: right center; }
}
.animate-gradient {
background-size: 200% auto;
animation: gradient-x 3s ease infinite;
}Radial Gradients With Arbitrary Values
Tailwind does not include radial gradient utilities by default, but you can write them using arbitrary values. The bg-[radial-gradient(...)] syntax lets you specify any valid CSS gradient value directly. This is powerful for creating spotlight or glow effects, though use arbitrary values sparingly as they bypass the design token system.
<!-- Radial glow effect via arbitrary value -->
<div class="bg-[radial-gradient(ellipse_at_center,_theme(colors.indigo.300),_transparent)] h-64 w-full rounded-xl">
Radial glow from center
</div>Practical: SaaS Pricing Card Gradient
A highlighted pricing card (the recommended plan) often uses a gradient background to make it stand out. Combine a gradient background with a shadow, rounded corners, and white text for a premium, conversion-optimized look. The non-highlighted plans use a plain white background, making the gradient card the visual focal point of the pricing section.
<div class="bg-gradient-to-b from-indigo-600 to-indigo-800 rounded-2xl p-8 shadow-2xl text-white">
<p class="text-indigo-200 text-sm font-semibold uppercase tracking-wider">Most Popular</p>
<p class="text-4xl font-black mt-2">$49<span class="text-xl font-normal">/mo</span></p>
<ul class="mt-6 space-y-3 text-indigo-100 text-sm">
<li>Unlimited projects</li>
<li>Priority support</li>
<li>Custom domain</li>
</ul>
<button class="mt-8 w-full bg-white text-indigo-700 font-bold py-3 rounded-xl hover:bg-indigo-50">
Get Started
</button>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: bg-gradient-to-{direction} sets gradient direction using compass points, from-*, via-*, and to-* define up to three color stops, and bg-clip-text text-transparent creates gradient-filled text. Next up we learn how to control background opacity and use color modifiers effectively.
Frequently asked questions
Is the “Background Gradients” lesson free?
Yes — the full text of “Background Gradients” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Background Gradients”?
Build linear gradients using bg-gradient-to-* and from-*/via-*/to-* color stops for rich visual effects. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Background Gradients” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.