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

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 Position

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

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