Backgrounds & Gradients

Background colours, images, sizing and repetition — plus linear, radial and conic gradients with the renamed v4 utilities.

Backgrounds cover solid fills, images, and the gradient utilities that were renamed in v4.

Background colour#

<div class="bg-white dark:bg-gray-900">…</div>
<div class="bg-indigo-600">…</div>
<div class="bg-gray-900/60">Translucent overlay</div>

See Colors for the palette and the opacity modifier.

Gradients#

Linear#

Stops are set with from-*, via-* and to-*:

<div class="space-y-3 p-4 text-sm font-medium text-white">
  <div class="rounded-lg bg-linear-to-r from-indigo-500 to-purple-600 p-6">from → to</div>
  <div class="rounded-lg bg-linear-to-r from-sky-400 via-indigo-500 to-purple-600 p-6">from → via → to</div>
  <div class="rounded-lg bg-linear-65 from-emerald-400 to-cyan-600 p-6">bg-linear-65 (angle)</div>
</div>

Stop positions#

<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">…</div>

Radial and conic#

<div class="grid grid-cols-2 gap-3 p-4 text-sm font-medium text-white">
  <div class="grid h-28 place-items-center rounded-lg bg-radial from-pink-400 to-fuchsia-700">bg-radial</div>
  <div class="grid h-28 place-items-center rounded-lg bg-conic from-amber-400 via-rose-500 to-violet-600">bg-conic</div>
</div>

Interpolation#

<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">…</div>

The /oklch or /srgb modifier controls the colour space used between stops. oklch avoids the muddy grey midpoint that sRGB produces between complementary colours.

Text gradients#

<div class="p-4">
  <h2 class="bg-linear-to-r from-indigo-500 to-fuchsia-500 bg-clip-text text-3xl font-bold text-transparent">
    Gradient text
  </h2>
</div>

bg-clip-text plus text-transparent is the whole trick.

Background images#

<div class="bg-[url('/hero.jpg')] bg-cover bg-center">…</div>

Layering an image and a gradient#

<div class="relative isolate overflow-hidden rounded-xl">
  <img class="absolute inset-0 -z-10 size-full object-cover" src="/hero.jpg" alt="">
  <div class="absolute inset-0 -z-10 bg-linear-to-t from-gray-900/80 to-gray-900/20"></div>
  <div class="p-8 text-white">…</div>
</div>

Layering separate elements is more flexible than stacking background-image values, and lets you animate each layer independently. Note isolate — see Overflow & Layering.

Common patterns#

Subtle section background#

<section class="bg-gray-50 dark:bg-gray-900/50">…</section>

Glassmorphism#

<div class="relative overflow-hidden rounded-xl bg-linear-to-br from-indigo-500 to-purple-700 p-8">
  <div class="rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-md">
    <h3 class="font-semibold text-white">Frosted panel</h3>
    <p class="mt-1 text-sm text-white/80">Translucent background plus a backdrop blur.</p>
  </div>
</div>

Grid pattern background#

<div class="bg-[linear-gradient(to_right,theme(--color-gray-200)_1px,transparent_1px),linear-gradient(to_bottom,theme(--color-gray-200)_1px,transparent_1px)] bg-[size:24px_24px]">
  …
</div>

Or more readably, with a custom utility:

@utility bg-grid {
  background-image:
    linear-gradient(to right, var(--color-gray-200) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-gray-200) 1px, transparent 1px);
  background-size: 24px 24px;
}

Animated gradient border#

<div class="rounded-xl bg-linear-to-r from-indigo-500 to-fuchsia-500 p-px">
  <div class="rounded-[calc(0.75rem-1px)] bg-white p-6 dark:bg-gray-900">
    Gradient border via a 1px padded wrapper.
  </div>
</div>

Masks#

v4.1 Mask utilities fade content out using a gradient rather than a solid overlay.

<div class="mask-b-from-60% mask-b-to-100%">
  <img src="/photo.jpg" alt="">
</div>

That fades the bottom of the image to transparent — cleaner than overlaying a gradient in the background colour, because it works over any backdrop.

Common mistakes#

• bg-gradient-to-r in new code. Prefer bg-linear-to-r.
• Gradient with only from-*. You need to-* as well, or the gradient runs to transparent.
• bg-cover without a height. A background image cannot give an element height; set h-*, aspect-* or add content.
• bg-fixed on mobile. Support is poor on iOS and it hurts scroll performance.
• bg-clip-text without text-transparent. The solid text colour paints over the gradient.
• Text over an image with no scrim. Add a gradient overlay or text-shadow-* so contrast holds across the whole image.

Related topics#

• Colors — palette and opacity
• Shadows — elevation
• Filters & Effects — backdrop-blur, blend modes
• Sizing — aspect-* and object-* for images