Background

Use these utilities to style 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 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",
  })}
/>

Background Position

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

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