Background Gradients
Build linear gradients using bg-gradient-to-* and from-*/via-*/to-* color stops for rich visual effects.
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>