Utility Reference
Background
Panda provides the following utilities or style properties for styling background colors, gradients, and images.
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| 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 |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
Background · 13
| Property | Shorthand | Class | Values |
|---|---|---|---|
| background | bg | bg | colors |
| backgroundAttachment | bgAttachment | bg-a | — |
| backgroundBlendMode | bgBlendMode | bg-bm | — |
| backgroundClip | bgClip | bg-cp | — |
| backgroundColor | bgColor | bg-c | colors |
| backgroundImage | bgImage | bg-i | assets |
| backgroundOrigin | bgOrigin | bg-o | — |
| backgroundPosition | bgPosition | bg-p | — |
| backgroundPositionX | bgPositionX | bg-p-x | — |
| backgroundPositionY | bgPositionY | bg-p-y | — |
| backgroundRepeat | bgRepeat | bg-r | — |
| backgroundSize | bgSize | bg-s | — |
| opacity | — | op | opacity |
Color · 7
| Property | Shorthand | Class | Values |
|---|---|---|---|
| accentColor | — | ac-c | colors |
| boxShadowColor | shadowColor | bx-sh-c | colors |
| caretColor | — | ca-c | colors |
| color | — | c | colors |
| fill | — | fill | colors |
| outlineColor | ringColor | ring-c | colors |
| stroke | — | stk | colors |