Background

Background Attachment

Use bgAttachment to control the attachment of a background image.

<Box bgAttachment="fixed" bgImage="url(...)" />

Prop	CSS Property	Token Category
bgAttachment, backgroundAttachment	background-attachment	-

Background Blend Mode

Use bgBlendMode prop to control how an element's background image should blend with the its background color.

<Box bgBlendMode="multiply" bgColor="red.200" bgImage="url(...)" />

Background Clip

Use bgClip to control the clipping of a background image.

<Box bgClip="border-box" bgImage="url(...)" />

Prop	CSS Property	Token Category
bgClip, backgroundClip	background-clip	-

Background Color

Use bg, bgColor, or backgroundColor props to set the background color of an element.

<Box bg="red.200" />
<Box bgColor="red.200" />

// with opacity modifier
<Box bg="blue.200/30" />
<Box bgColor="blue.200/30" />

Prop	CSS Property	Token Category
bg, background	background	colors
bgColor, backgroundColor	background-color	colors

Background Origin

Use bgOrigin or backgroundOrigin to control the origin of a background image.

<Box bgOrigin="border-box" bgImage="url(...)" />

Prop	CSS Property	Token Category
bgOrigin, backgroundOrigin	background-origin	-

Background Position

Properties for controlling the src and position of a background image.

<Box bgImage="url(...)" bgPosition="center" />

Prop	CSS Property	Token Category
bgPosition, backgroundPosition	background-image	-
bgPositionX, backgroundPositionX	background-image	-
bgPositionY, backgroundPositionY	background-image	-

Background Repeat

Use bgRepeat or backgroundRepeat to control the repeat of a background image.

<Box bgRepeat="no-repeat" bgImage="url(...)" />

Prop	CSS Property	Token Category
bgRepeat, backgroundRepeat	background-repeat	-

Background Size

Use bgSize or backgroundSize to control the size of a background image.

<Box bgSize="cover" bgImage="url(...)" />

Prop	CSS Property	Token Category
bgSize, backgroundSize	background-size	-

Background Image

Use bgImage or backgroundImage to set the background image of an element.

<Box bgImage="url(...)" />
<Box bgImage="radial-gradient(circle, #0000 45%, #000f 48%)" />
<Box bgImage="linear-gradient(black, white)" />

// with token reference
<Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />

Prop	CSS Property	Token Category
bgImage, backgroundImage	background-image	assets, gradients

Background Gradient

Properties to create a background gradient based on color stops.

<Box bgGradient="to-r" gradientFrom="red.200" gradientTo="blue.200" />

Prop	CSS Property	Token Category
bgGradient	background-image	gradients
textGradient	background-image	gradients
gradientFrom	--gradient-from	colors
gradientTo	--gradient-to	colors
gradientVia	--gradient-via	colors