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 |