Backgrounds & Gradients in Tailwind CSS
From the Tailwind CSS cheat sheet · Backgrounds & Borders · verified Jul 2026
Backgrounds & Gradients
Background colors, images, and gradient utilities.
html
<!-- Background color -->
<div class="bg-white dark:bg-gray-900">Card</div>
<div class="bg-blue-500/10">Subtle tint</div>
<!-- Gradients -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
Left to right gradient
</div>
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
Three-color diagonal gradient
</div>💡 Use via-color to add a mid-point color stop in gradients
⚡ bg-blue-500/10 creates a subtle tint — great for hover states and cards
📌 bg-fixed creates a parallax scrolling effect on background images
🟢 Gradient directions: to-r (right), to-b (bottom), to-br (bottom-right), etc.
backgroundsgradientsimages