背景渐变

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

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.