Background Image

Use the bg-[url(...)] arbitrary value to set a network or asset background image. Pair with bg-cover / bg-contain / bg-auto, bg-{position}, and bg-no-repeat to control fitting and positioning.

Style('bg-[url(/img/mountains.jpg)] ...')

Adding a linear gradient

Use bg-linear-to-{dir} (or the v3 alias bg-gradient-to-{dir}) with from-, via-, and to- color stops to add a linear gradient. The CSS-angle form bg-linear-<N> (degrees from top, clockwise) is supported as well:

Style('h-14 bg-linear-to-r from-cyan-500 to-blue-500')
Style('h-14 bg-linear-to-t from-sky-500 to-indigo-500')
Style('h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500')
Style('h-14 bg-linear-65 from-purple-500 to-pink-500')

Adding a radial gradient

Use bg-radial (default centre) or bg-radial-[at_X%_Y%] (explicit centre) with the same color-stop utilities:

Style('size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700')
Style('size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%')
Style('size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%')

Adding a conic gradient

bg-conic builds a sweep gradient from the centre. bg-conic-<N> rotates the start angle by N CSS degrees:

Style('sm:size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%')
Style('sm:size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600')
Style('sm:size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700')

The upstream Tailwind page has a third bg-conic/decreasing bar that selects a CSS hue-space interpolation mode. Flutter’s gradient renderer interpolates linearly in sRGB; matching the CSS hue-space behaviour requires a custom shader and is deferred — see the deferred examples table below.

Setting gradient color stops

from-{color}, via-{color}, and to-{color} set the gradient stop colors:

Style('bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 ...')

Setting gradient stop positions

Append -N% (0–100) to any stop utility to position it explicitly:

Style('bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ...')

Class reference

Class	Description
bg-[url(...)]	Set background image from a network or asset URL.
bg-cover	Cover the box (matches CSS background-size: cover).
bg-contain	Contain inside the box (background-size: contain).
bg-auto	Render at native size.
bg-no-repeat, bg-repeat, bg-repeat-x, bg-repeat-y	Tiling behaviour.
bg-[size:8rem] / bg-[size:8rem_4rem]	Explicit Width / Width Height in CSS lengths (rem/px).
bg-{position}	Align the background image (see background-position).
bg-linear-to-{t,tr,r,br,b,bl,l,tl}	Linear gradient direction.
bg-linear-<N>	Linear gradient at N CSS degrees (from top, clockwise).
bg-radial	Radial gradient centred on the box.
bg-radial-[at_X%_Y%]	Radial gradient centred at X%, Y% of the box.
bg-conic	Conic gradient starting at the top.
bg-conic-<N>	Conic gradient with N-degree start angle.
from-<color>, via-<color>, to-<color>	Gradient stop colors.
from-<N>%, via-<N>%, to-<N>%	Explicit stop positions in 0–100.

Deferred examples

The following examples on the upstream Tailwind page are not yet visually faithful — see PLAYGROUND_PARITY.md “Library prerequisites”:

• Color-interpolation modifier (bg-linear-to-r/srgb, /hsl, /oklab, /oklch, /longer, /shorter, /increasing, /decreasing, plus the conic equivalents). Flutter’s gradient renderer interpolates linearly in sRGB; CSS color-interpolation-method requires a custom shader.