Utilities

Background

Panda provides the following utilities or style properties for styling background colors, gradients, and images.

Background Colors

<div className={css({ bg: 'red.200' })} />
<div className={css({ bg: 'blue.200/30' })} /> // with alpha

Prop	CSS Property	Token Category
`bg`, `background`	`background`	`colors`
`bgColor`, `backgroundColor`	`background-color`	`colors`
`bgGradient`	`background-image`	`gradients`

Background Gradients

Properties to create a background gradient based on color stops.

<div
  className={css({
    bgGradient: 'to-r',
    gradientFrom: 'red.200',
    gradientTo: 'blue.200'
  })}
/>

Background and text gradients can be connected to design tokens. Here's how to define a gradient token in your theme.

const theme = {
  tokens: {
    gradients: {
      // string value
      simple: { value: 'linear-gradient(to right, red, blue)' },
      // composite value
      primary: {
        value: {
          type: 'linear',
          placement: 'to right',
          stops: ['red', 'blue']
        }
      }
    }
  }
}

These tokens can be used in the bgGradient or textGradient properties.

<div
  className={css({
    bgGradient: "simple",
  })}
/>
 
<div
  className={css({
    bgGradient: "primary",
  })}
/>

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`

Background Position

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

<div
  className={css({
    bgImage: 'url(/images/bg.jpg)',
    bgPosition: 'center'
  })}
/>

Prop	CSS Property	Token Category
`bgPosition`, `backgroundPosition`	`background-image`	none
`bgPositionX`, `backgroundPositionX`	`background-image`	none
`bgPositionY`, `backgroundPositionY`	`background-image`	none
`bgAttachment` ,`backgroundAttachment`	`background-size`	none
`bgClip`, `backgroundClip`	`background-size`	none
`bgOrigin`, `backgroundOrigin`	`background-size`	none
`bgImage`, `backgroundImage`	`background-size`	assets
`bgRepeat`, `backgroundRepeat`	`background-repeat`	none
`bgBlendMode`, `backgroundBlendMode`	`background-size`	none
`bgSize`, `backgroundSize`	`background-size`	none

Deprecations Border