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
PropCSS PropertyToken Category
bg, backgroundbackgroundcolors
bgColor, backgroundColorbackground-colorcolors
bgGradientbackground-imagegradients

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",
  })}
/>
PropCSS PropertyToken Category
bgGradientbackground-imagegradients
textGradientbackground-imagegradients
gradientFrom--gradient-fromcolors
gradientTo--gradient-tocolors
gradientVia--gradient-viacolors

Background Position

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

<div
  className={css({
    bgImage: 'url(/images/bg.jpg)',
    bgPosition: 'center'
  })}
/>
PropCSS PropertyToken Category
bgPosition, backgroundPositionbackground-imagenone
bgPositionX, backgroundPositionXbackground-imagenone
bgPositionY, backgroundPositionYbackground-imagenone
bgAttachment ,backgroundAttachmentbackground-sizenone
bgClip, backgroundClipbackground-sizenone
bgOrigin, backgroundOriginbackground-sizenone
bgImage, backgroundImagebackground-sizeassets
bgRepeat, backgroundRepeatbackground-repeatnone
bgBlendMode, backgroundBlendModebackground-sizenone
bgSize, backgroundSizebackground-sizenone