iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Backgrounds

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind background utilities cover colour, image, gradient, attachment, clipping, origin, position, repeat, and size. Together they handle most of the design work that used to require a hand-written stylesheet. The gradients in particular are first-class — multi-stop, directional, conic — without ever writing a linear-gradient() string.

Solid, gradient, image, and pattern backgrounds

EXAMPLE
<!-- 1) Solid colours with opacity and arbitrary hex -->
<div class='bg-slate-900 text-white p-4'>Solid</div>
<div class='bg-slate-900/80 backdrop-blur p-4'>Translucent 80% over a blur</div>
<div class='bg-[#0f172a] p-4'>Arbitrary hex</div>

<!-- 2) Linear and radial gradients (Tailwind v3.4+ supports radial/conic) -->
<div class='bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white p-6'>
  Linear gradient, left to right
</div>
<div class='bg-radial-[at_top_left] from-blue-500 to-transparent text-white p-6'>
  Radial gradient from top-left
</div>
<div class='bg-conic-180 from-amber-300 via-red-500 to-amber-300 p-6'>
  Conic gradient
</div>

<!-- 3) Background image with size, position, repeat, attachment -->
<section class='h-64 bg-[url(/img/hero.jpg)]
                bg-cover bg-center bg-no-repeat bg-fixed
                text-white p-8'>
  Cinematic hero
</section>

<!-- 4) Layered backgrounds — gradient on top of an image -->
<section class='h-64 bg-no-repeat bg-cover bg-center text-white p-8'
         style="background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.7)), url('/img/hero.jpg')">
  Image with bottom-fade overlay
</section>

<!-- 5) Patterns via arbitrary background-image -->
<div class='h-32
            bg-[repeating-linear-gradient(45deg,theme(colors.slate.200)_0_10px,theme(colors.slate.100)_10px_20px)]'>
  Striped pattern
</div>

<!-- 6) Clip-to-text for fancy headlines -->
<h1 class='text-6xl font-extrabold bg-gradient-to-r from-sky-400 to-emerald-400 bg-clip-text text-transparent'>
  Gradient text
</h1>

<!-- 7) Background-origin / clip on padded boxes -->
<div class='p-8 border-4 border-dashed bg-amber-200 bg-origin-content bg-clip-content'>
  Background respects the content box, not the padding box
</div>

<!-- 8) Sticky element changing background on scroll position via group -->
<header class='sticky top-0 bg-white/70 backdrop-blur supports-[backdrop-filter]:bg-white/60'>
  Sticky header with backdrop-blur (and a graceful fallback)
</header>

Why it matters

The bg-clip-text + text-transparent combo is the trick behind every gradient headline you have ever liked. Pair it with a tasteful gradient (two close hues, not full rainbow) and the heading reads as a deliberate brand choice rather than a CSS trick.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="bg-gradient-to-r from-emerald-500 to-sky-500">…</div>
Try it Yourself »

Discussion

Loading…