Backgrounds, Borders, and Effects

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

These three families decorate the box: what fills it, what frames it, and what floats above it. Several defaults changed in v4 — the border and ring colours especially — and this page flags each one. See Background Color, Border Width, and Box Shadow.

Backgrounds

<div class="bg-sky-500">solid colour</div>
<div class="bg-sky-500/20">20% opacity via the / modifier</div>

<!-- image, size, position, repeat, attachment -->
<div class="bg-[url(/hero.jpg)] bg-cover bg-center bg-no-repeat">covers the box</div>
<div class="bg-[url(/dots.svg)] bg-repeat-x bg-local">scrolls with content</div>

<!-- clip the background to the text -->
<h1 class="bg-linear-to-r from-sky-500 to-indigo-500 bg-clip-text text-transparent">gradient text</h1>

Gradients

<div class="bg-linear-to-r  from-sky-500 to-indigo-500"></div>
<div class="bg-linear-65    from-pink-500 via-red-500 to-yellow-500"></div>
<div class="bg-radial        from-white to-slate-200"></div>
<div class="bg-conic         from-sky-500 via-indigo-500 to-sky-500"></div>

<!-- stop positions, and stops that survive a variant override -->
<div class="bg-linear-to-r from-sky-500 from-30% to-indigo-500 dark:from-slate-700 dark:to-black"></div>

In v4 the direction utility is bg-linear-to- (v3 called it bg-gradient-to-). See Background Image.

Borders

<!-- width: all sides, one axis, one side -->
<div class="border">1px on all sides</div>
<div class="border-2 border-x-4 border-t-0">mixed widths</div>

<!-- colour: v4's default is currentColor, so always set one -->
<div class="border border-gray-300">visible grey frame</div>

<div class="border border-dashed"></div>

<!-- radius: `rounded` == `rounded-sm` in v4; the old `rounded-sm` is now `rounded-xs` -->
<div class="rounded-xl">large radius</div>
<div class="rounded-t-lg rounded-br-none">per-corner</div>
<div class="rounded-full">pill / circle</div>

<!-- dividers between children -->
<ul class="divide-y divide-gray-200">
  <li class="py-2">a</li><li class="py-2">b</li>
</ul>

The default border-color and divide-color are now currentColor, not gray-200. A bare border with no border-* colour picks up the element’s text colour. Always pair border with an explicit colour utility.

Outline and ring

<!-- outline (does not affect layout, follows border-radius) -->
<button class="outline outline-2 outline-offset-2 outline-sky-500 focus-visible:outline-4">Focus me</button>

<!-- outline-hidden replaces v3's outline-none (it keeps a transparent outline for forced-colors) -->
<input class="outline-hidden focus:outline-2 focus:outline-sky-500" />

<!-- ring: a box-shadow-based outline. In v4 `ring` is 1px and currentColor
     (v3: 3px + blue-500). Use ring-2 / ring-sky-500 explicitly. -->
<button class="ring-2 ring-sky-500 ring-offset-2 ring-offset-white">ringed</button>
<div class="inset-ring-2 inset-ring-white/20">inset ring</div>

See Outline and Ring.

Effects

<!-- box shadow: xs .. 2xl, plus coloured and inset -->
<div class="shadow-sm">subtle</div>
<div class="shadow-lg shadow-sky-500/30">coloured</div>
<div class="inset-shadow-sm">inset</div>

<!-- text shadow (new in v4) -->
<h1 class="text-shadow-lg text-shadow-sky-500/40">raised heading</h1>

<!-- opacity, blend modes -->
<img class="opacity-75" />
<div class="mix-blend-multiply">blends with siblings</div>
<div class="bg-[url(/x.jpg)] bg-blend-overlay bg-sky-500"></div>

<!-- mask utilities (new in v4): fade an element with a gradient mask -->
<img class="mask-b-from-50% mask-b-to-90%" />
<div class="mask-[url(/shape.svg)] mask-contain mask-center"></div>

In v4 shadow renamed down a step: the old shadow-sm is now shadow-xs, and the old shadow is shadow-sm (same shift for drop-shadow, blur, rounded, backdrop-blur). See Mask and Text Shadow.

Related pages