Add color, gradients, borders, shadows, and rings to give elements depth and visual hierarchy.
Why: bg-* sets a solid background color. bg-linear-to-r (or -b, -tr, etc.) starts a gradient, and from-* / via-* / to-* define its color stops. (v4 renamed v3's bg-gradient-to-* to bg-linear-to-*, alongside new bg-radial and bg-conic utilities.)
<div class="space-y-3 p-4">
<div class="h-12 rounded bg-emerald-500"></div>
<div class="h-12 rounded bg-linear-to-r from-indigo-500 to-pink-500"></div>
<div class="h-12 rounded bg-linear-to-r from-amber-400 via-rose-500 to-purple-600"></div>
</div>Why: border adds a 1px border, border-2 / border-4 thicken it, and border-{color} sets its color. rounded-* controls corner radius — use rounded-t-lg, rounded-l-full, etc. to round individual corners.
<div class="flex flex-wrap gap-4 p-4">
<div class="h-16 w-16 rounded border-2 border-slate-300"></div>
<div class="h-16 w-16 rounded-lg border-4 border-indigo-500"></div>
<div class="h-16 w-16 rounded-full border-2 border-emerald-500"></div>
<div class="h-16 w-16 rounded-t-2xl border-2 border-pink-500"></div>
</div>Why: shadow-sm through shadow-2xl add soft drop shadows for elevation. ring-* draws a solid outline outside the border — commonly used for focus states — and ring-offset-* adds a gap between the element and its ring.
<div class="flex flex-wrap items-center gap-6 p-6">
<div class="h-16 w-16 rounded-lg bg-white shadow-sm"></div>
<div class="h-16 w-16 rounded-lg bg-white shadow-lg"></div>
<div class="h-16 w-16 rounded-lg bg-white shadow-2xl"></div>
<button class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white ring-2 ring-indigo-300 ring-offset-2">
Focused button
</button>
</div>Why: opacity-* fades an entire element. blur-* softens it. backdrop-blur-* blurs whatever is behind a semi-transparent element — the classic "frosted glass" effect.
<div class="relative h-40 overflow-hidden rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500">
<div class="absolute inset-0 flex items-end p-4">
<div class="rounded-lg bg-white/30 px-4 py-2 text-white backdrop-blur-md">
backdrop-blur-md + bg-white/30
</div>
</div>
</div>
<div class="mt-4 flex gap-4 p-4">
<div class="h-12 w-12 rounded bg-indigo-500 opacity-100"></div>
<div class="h-12 w-12 rounded bg-indigo-500 opacity-50"></div>
<div class="h-12 w-12 rounded bg-indigo-500 blur-sm"></div>
</div>