Capítulo 21 de 29
Background utilities cover color, gradient images, and how a background image is clipped/positioned/repeated/sized/blended — gradients are built with CSS variables (--tw-gradient-stops) so from-*/via-*/to-* color-stop utilities compose independently of the gradient direction utility.
background-attachment: bg-fixed (pinned to viewport, ignores scroll), bg-local (scrolls with the element's own content), bg-scroll (scrolls with the page, default).
background-blend-mode: bg-blend-{normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity} — same 16 CSS blend modes as mix-blend-mode (Effects chapter), applied between the background image and background color layers.
background-clip: bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text (clips background to the text glyphs — the standard technique for gradient-filled text, combine with a transparent text-color).
background-color: bg-inherit/bg-current/bg-transparent plus the full color palette (bg-<color>-<shade>), bg-(<custom-property>), bg-[<value>].
background-image (gradients): bg-none; bg-linear-to-{t,tr,r,br,b,bl,l,tl} (8 compass directions); bg-linear-<angle>/-bg-linear-<angle> (arbitrary/negative angle, computed in oklab for perceptually smooth gradients); bg-linear-(<custom-property>)/bg-linear-[<value>]; bg-radial(+angle/position variants) and bg-conic(+angle variants) for radial/conic gradients. Color stops are separate composable utilities: from-<color>, via-<color> (middle stop, makes it a 3-stop gradient), to-<color> — each also accepts from-<percentage>/via-<percentage>/to-<percentage> to reposition a stop. Since v4, overriding just from-* in a variant no longer resets via-*/to-* (see Upgrade Guide) — use via-none to explicitly collapse a 3-stop gradient to 2 stops in one state.
background-origin: bg-origin-border, bg-origin-padding, bg-origin-content.
background-position: 9-point grid (bg-top-left…bg-bottom-right, bg-center), bg-position-(<custom-property>)/bg-position-[<value>].
background-repeat: bg-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-space, bg-repeat-round, bg-no-repeat.
background-size: bg-auto, bg-cover (fill, crop if needed), bg-contain (fit entirely, may letterbox), bg-size-(<custom-property>)/bg-size-[<value>].
<h1 class="bg-linear-to-r from-indigo-600 to-pink-500 bg-clip-text text-transparent">Gradient Heading</h1>
<div class="bg-linear-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400">
...
</div>
<div class="bg-fixed bg-cover bg-center" style="background-image: url('/hero.jpg')">...</div>
bg-clip-text + transparent text color for gradient text, explicit via-none to collapse a 3-stop gradient in a variant state, and the classic bg-fixed bg-cover bg-center parallax pattern.from-*/via-*/to-*) are independent of the direction utility (bg-linear-to-r) — mixing a bg-radial/bg-conic direction with the same stop classes works identically.bg-clip-text needs a transparent text color (text-transparent) to actually show the background through the glyphs.from-* no longer silently clears via-*/to-* — use via-none explicitly if that reset behavior is what you want (see Upgrade Guide).bg-fixed only visually "detaches" the background from scrolling within its own stacking context — it can behave unexpectedly inside a scrolling ancestor with overflow/transform set.bg-<color>, from-*/via-*/to-* draw from the same palette/opacity-modifier system.background-blend-mode shares its value set with mix-blend-mode.