Background, Border, and Shadow Utilities

Background utilities in Tailwind control color (bg-*), opacity (bg-opacity-* or the slash syntax bg-blue-500/75), size (bg-cover, bg-contain), position (bg-center, bg-top), and repeat (bg-no-repeat). The bg-gradient-to-* utilities combined with from-*, via-*, and to-* classes let you build linear gradients without writing a single line of CSS. Border utilities cover width (border, border-2, border-4, border-8), color (border-gray-300, border-red-500), style (border-solid, border-dashed, border-dotted), and radius (rounded, rounded-md, rounded-lg, rounded-full, rounded-none). Individual sides use the directional shorthand: border-t-2, border-r, border-b-4, border-l-0. The ring utilities (ring-2, ring-blue-500, ring-offset-2) produce focus-visible outlines using box-shadow. Shadow utilities (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none) apply pre-designed drop shadows. You can also color shadows with shadow-blue-500/50. Combining rounded-xl with shadow-lg and a hover:shadow-2xl transition creates the card elevation effect seen throughout modern UIs.

Example

<!-- Solid backgrounds -->
<div class="bg-sky-100 text-sky-900 p-4">Light sky panel</div>
<div class="bg-indigo-600 text-white p-4">Indigo button</div>

<!-- Background with opacity (slash syntax, Tailwind v3+) -->
<div class="bg-black/50 backdrop-blur-sm p-6">Semi-transparent overlay</div>

<!-- Gradient background -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-8 rounded-xl">
  Gradient card
</div>

<!-- Borders -->
<input class="border border-gray-300 rounded-md px-3 py-2
              focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none" />

<div class="border-2 border-dashed border-gray-400 rounded-lg p-4">
  Dashed placeholder area
</div>

<!-- Ring (focus outline) -->
<button class="bg-blue-600 text-white px-4 py-2 rounded
               focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
  Accessible button
</button>

<!-- Cards with shadow + hover elevation -->
<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
  <h3 class="font-semibold text-lg mb-2">Card title</h3>
  <p class="text-gray-500 text-sm">Card body text.</p>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned