Summit Themes
Blog

A guide to Tailwind CSS backgrounds

Published on August 11, 2025 by Summit Themes Team · 8 min read

Backgrounds do more visual work than almost any other CSS property. A solid color sets the brand tone, a gradient adds depth, a full-bleed photo creates context, and a subtle pattern adds texture without weight. Tailwind covers all of it — and in v4 the API got cleaner, the gradient system got significantly more capable, and customization moved to plain CSS variables instead of a JavaScript config file.

This guide walks through every background category in Tailwind v4, with copy-pasteable examples and the reasoning behind the choices you will actually face when building real pages.

Background colors

The bg-{color}-{shade} utilities set background-color. Tailwind ships a full palette — red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, and several neutrals (slate, gray, zinc, neutral, stone) — each with eleven shades from 50 to 950.

<div class="bg-sky-500">Solid mid-blue</div>
<div class="bg-slate-900">Near-black</div>
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>

Opacity modifier

Append /{amount} to any color utility to set opacity without reaching for a separate class. Tailwind generates the right CSS using background-color with an alpha channel, so there is no bg-opacity-* hack needed in v4.

<div class="bg-sky-500/75">75% opaque blue</div>
<div class="bg-sky-500/50">50% opaque blue</div>
<div class="bg-sky-500/10">Very faint blue tint</div>

Custom colors via @theme

In v4, you extend the palette by adding CSS custom properties to a @theme block in your stylesheet — no tailwind.config.js required.

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand: oklch(55% 0.22 260);
  --color-brand-light: oklch(80% 0.15 260);
}

After that, bg-brand and bg-brand-light work exactly like any built-in color, including the /opacity modifier and state variants.

Arbitrary values

For one-off hex or rgb values that do not belong in your theme, use square brackets:

<div class="bg-[#1a1a2e]">Deep navy</div>
<div class="bg-[rgb(255,100,50)]">Custom orange</div>

Background images

A background image is any value accepted by the CSS background-image property: a photo, an SVG data URI, or a gradient function. In Tailwind you set it with an arbitrary value using square brackets.

<div class="bg-[url(/images/hero.jpg)] bg-cover bg-center min-h-screen">
  <!-- content -->
</div>

To remove a background image entirely, use bg-none.

Registering reusable background images in @theme

If you reuse the same image or pattern in several places, register it under the --background-image-* namespace:

@theme {
  --background-image-hero: url('/images/hero.jpg');
  --background-image-noise: url('/images/noise.svg');
  --background-image-hero-overlay: linear-gradient(
    to bottom,
    transparent 0%,
    oklch(10% 0 0 / 70%) 100%
  );
}

Now you can write bg-hero, bg-noise, and bg-hero-overlay in your HTML. The overlay example is a common trick for darkening a photo so text placed over it remains legible.

Background size

Three utilities cover the common cases:

  • bg-cover — scales the image to fill the container, cropping if necessary. Use this for hero sections.
  • bg-contain — scales the image to fit inside the container without cropping. Use this for logos or icons set as backgrounds.
  • bg-auto — renders the image at its intrinsic size. Useful for textures and patterns.
<!-- Full-bleed hero -->
<div class="bg-[url(/images/city.jpg)] bg-cover bg-center h-screen"></div>

<!-- Pattern tile -->
<div class="bg-[url(/images/pattern.png)] bg-auto bg-repeat"></div>

For exact control, bg-size-[value] accepts any valid CSS background-size value:

<div class="bg-size-[200px_100px]">Fixed 200×100 background</div>

Background position

Background position utilities follow an intuitive naming pattern: bg-center, bg-top, bg-bottom, bg-left, bg-right, and the four corners bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right.

<!-- Focus on the top of the image (faces, skylines) -->
<div class="bg-[url(/images/team.jpg)] bg-cover bg-top"></div>

<!-- Center is the default safe choice -->
<div class="bg-[url(/images/landscape.jpg)] bg-cover bg-center"></div>

For precise offsets, use an arbitrary value:

<div class="bg-position-[center_top_2rem]">Shifted down from top</div>

Background repeat

By default, CSS repeats background images in both directions. For photos you almost always want bg-no-repeat. For textures and patterns, the repeat utilities give you fine-grained control:

  • bg-no-repeat — no repetition
  • bg-repeat — repeat in both directions (the CSS default)
  • bg-repeat-x — horizontal only
  • bg-repeat-y — vertical only
  • bg-repeat-space — repeat without clipping, spacing images evenly
  • bg-repeat-round — repeat, stretching images slightly to avoid gaps

Background attachment

The attachment utilities control whether a background scrolls with the page or stays fixed.

  • bg-scroll — the default; background moves with the element
  • bg-fixed — background is fixed relative to the viewport, creating a parallax effect
  • bg-local — background scrolls with the element's own scrollable content
<div class="bg-[url(/images/mountains.jpg)] bg-cover bg-fixed bg-center min-h-screen">
  <!-- content scrolls over a stationary photo -->
</div>

A word of caution: bg-fixed has known rendering issues on iOS Safari, where it either does not work or causes repaints. If mobile fidelity matters, prefer a CSS sticky/transform approach or a JavaScript parallax library instead.

Gradients

This is where v4 made the biggest leap. The old bg-gradient-to-r class is replaced with a more expressive system that mirrors native CSS gradient functions much more closely.

Linear gradients

The direction utilities use compass-style names: bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, and so on. Angle-based gradients are also first-class — bg-linear-65 creates a 65-degree gradient.

<!-- Left to right -->
<div class="bg-linear-to-r from-cyan-500 to-blue-700 h-32"></div>

<!-- Diagonal with three stops -->
<div class="bg-linear-to-br from-violet-500 via-purple-500 to-indigo-700 h-32"></div>

<!-- 45-degree angle -->
<div class="bg-linear-45 from-rose-500 to-orange-400 h-32"></div>

You can pin each stop to a specific position using percentage utilities:

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

Color interpolation modes

Tailwind v4 defaults to the oklab color space for gradients, which produces more perceptually consistent mid-points — no more muddy grays when transitioning between hues. You can override this with a modifier:

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

Radial gradients

bg-radial creates a circular gradient from the center outward. Combine it with from-, via-, and to- the same way as linear gradients.

<!-- Glowing dot effect -->
<div class="size-24 rounded-full bg-radial from-sky-300 to-blue-700"></div>

<!-- Off-center radial -->
<div class="bg-radial-[at_30%_70%] from-amber-300 to-orange-600 h-48"></div>

Conic gradients

Conic gradients rotate around a center point. They are excellent for pie-chart visuals and color-wheel effects.

<div class="size-24 rounded-full bg-conic from-red-500 via-yellow-400 to-green-500"></div>

Fully custom gradients

For anything the shorthand utilities cannot express, drop the full gradient value in square brackets or reference a CSS variable:

<!-- Inline arbitrary value -->
<div class="bg-linear-[25deg,oklch(70%_0.2_30)_0%,oklch(60%_0.25_260)_100%]"></div>

<!-- CSS variable reference -->
<div class="bg-linear-(--brand-gradient)"></div>

Practical patterns you will actually use

Hero section with photo and overlay

<section
  class="relative min-h-[70vh] bg-[url(/images/hero.jpg)] bg-cover bg-center flex items-end"
>
  <!-- dark gradient overlay for text legibility -->
  <div class="absolute inset-0 bg-linear-to-t from-black/70 to-transparent"></div>
  <div class="relative z-10 p-8 text-white">
    <h2 class="text-4xl font-bold">Headline over the photo</h2>
  </div>
</section>

The overlay div sits between the photo background and the text, darkening the bottom of the frame so white text reads cleanly regardless of what the photo contains.

Section background that changes at a breakpoint

<section class="bg-slate-100 md:bg-linear-to-br md:from-slate-900 md:to-indigo-900">
  <!-- light on mobile, dark gradient on desktop -->
</section>

Subtle noise texture over a gradient

Layering a semi-transparent SVG noise pattern over a gradient adds tactile depth without a photograph. Register both in @theme and stack them:

@theme {
  --background-image-noise: url("data:image/svg+xml,...");
}

<!-- Stack noise on top of a gradient using multiple backgrounds in CSS -->
<div class="bg-noise bg-linear-to-br from-violet-900 to-indigo-900"></div>

CSS applies multiple background-image values in order, so a @theme image and a gradient set as different utilities will merge correctly in the generated stylesheet when both are on the same element — or you can compose them inside a single --background-image-* value using a comma-separated list if you want a single utility that does both.

Background origin and clip

Two less-used but occasionally essential utilities control how the background interacts with the box model. bg-origin-border, bg-origin-padding, and bg-origin-content set where the background starts. A complementary set — bg-clip-border, bg-clip-padding, bg-clip-content, and bg-clip-text — controls where it is clipped.

The bg-clip-text trick is worth knowing: combined with a gradient and text-transparent, it fills text characters with a gradient rather than a solid color.

<h2 class="bg-linear-to-r from-rose-500 to-orange-400 bg-clip-text text-transparent text-5xl font-black">
  Gradient text
</h2>

Putting it together

Tailwind's background utilities compose cleanly because each property is a separate class. A hero section might combine bg-cover bg-center bg-no-repeat bg-fixed bg-top with an image set as an arbitrary value — each class does exactly one thing, and you can swap any piece independently. In v4 the gradient system in particular became much closer to raw CSS, so there is very little reason to drop into a custom stylesheet just to get the angle or color space you want. Learning the pattern — direction or angle, color stops, optional position percentages, optional interpolation mode — covers most gradient needs on a production site.