Backgrounds & Gradients
Learn how to style backgrounds in Tailwind CSS with bg-* utilities and build linear gradients with bg-gradient-to-* and color stop utilities.
Introduction
Backgrounds set the tone for an entire section of a page, and Tailwind gives you full control over solid colors, images, and gradients through simple utility classes. In this lesson you will learn how to apply background colors and build smooth, professional-looking gradients.
- How to apply solid background colors with bg-*.
- How to control background images and sizing.
- How to set a gradient direction with bg-gradient-to-*.
- How to define gradient colors with from-*, via-*, and to-*.
Background Colors
Background colors follow the same bg-{color}-{shade} pattern used throughout Tailwind, for example bg-slate-900, bg-red-500, or bg-emerald-100. Opacity modifiers like bg-blue-500/20 let you create a translucent tint of any color.
<div class="bg-emerald-50 border border-emerald-200 text-emerald-800 p-4 rounded-lg"> Your changes have been saved successfully.</div>Click Run to see what this code prints.
Background Images and Sizing
bg-cover and bg-contain control how a background image scales to fill its container, bg-center and similar utilities position it, and bg-no-repeat stops it from tiling. These are typically combined with an inline style or arbitrary value for the actual image URL.
<div class="bg-[url('/hero.jpg')] bg-cover bg-center h-64 rounded-lg"> <div class="bg-black/40 h-full rounded-lg flex items-center justify-center"> <h2 class="text-white text-3xl font-bold">Welcome</h2> </div></div>Click Run to see what this code prints.
Linear Gradient Direction
bg-gradient-to-{direction} starts a linear gradient in a given direction, for example bg-gradient-to-r (left to right), bg-gradient-to-br (top-left to bottom-right), or bg-gradient-to-t (bottom to top). On its own it does nothing until you add color stops.
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl"> Gradient banner</div>Click Run to see what this code prints.
Gradient Color Stops
Color stops define what colors appear along the gradient. from-{color} sets the starting color and to-{color} sets the ending color. Both accept the full color palette, so you can mix and match any two colors to create a custom gradient.
<button class="bg-gradient-to-r from-pink-500 to-orange-400 text-white font-semibold px-6 py-3 rounded-full"> Get Started</button>Click Run to see what this code prints.
Three-Color Gradients
Adding a via-{color} utility between from-* and to-* introduces a middle color stop, letting you build richer, three-color gradients that feel less flat than a simple two-color blend.
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 h-40 rounded-xl"></div>Click Run to see what this code prints.
Common Mistakes
- Adding from-* and to-* without a bg-gradient-to-* direction class — the gradient direction utility is required to actually enable the gradient.
- Using low-contrast gradient color pairs that make overlaid text hard to read.
- Forgetting via-* when a two-color gradient looks too abrupt or flat for the design.
- Applying a background image without bg-cover or bg-contain, which can leave it tiled or oddly cropped.
- Overusing bright gradients across an entire interface instead of reserving them for accents like buttons and banners.
Best Practices
- Reserve gradients for high-impact elements like hero sections, banners, and primary buttons rather than the whole page.
- Pick adjacent or complementary colors on the color wheel for smoother, more professional-looking gradients.
- Always test text contrast over a gradient background, especially near the darker or lighter ends.
- Use bg-cover bg-center together for full-bleed background images so they scale correctly at any size.
- Keep a small set of approved gradient combinations for consistency across a project instead of inventing new ones per page.
Frequently Asked Questions
The built-in utilities focus on linear gradients, but you can use arbitrary value syntax like bg-[radial-gradient(circle,var(--tw-gradient-stops))] combined with from-*/to-* for radial gradients.
Yes, color stops accept opacity modifiers just like other color utilities, for example from-blue-500/50 for a semi-transparent starting color.
It supports eight directions: t, tr, r, br, b, bl, l, and tl, corresponding to top, top-right, right, bottom-right, bottom, bottom-left, left, and top-left.
Key Takeaways
- bg-{color}-{shade} applies solid background colors, with optional opacity modifiers.
- bg-cover, bg-contain, bg-center, and bg-no-repeat control background image behavior.
- bg-gradient-to-{direction} sets the direction of a linear gradient.
- from-* and to-* define the starting and ending gradient colors.
- via-* adds a middle color stop for richer three-color gradients.
Summary
Backgrounds and gradients are an easy way to add visual interest without custom CSS or image assets. With a direction, a starting color, and an ending color, you can build eye-catching banners and buttons in seconds. Next, you will learn how to style forms cleanly using Tailwind utilities and the official forms plugin.