Utility Reference
Effects
Panda provides utilities or style properties for applying various visual effects to elements.
Panda offers a range of utilities and style properties for applying visual effects to elements. These effects include opacity, shadows, blending modes, filters, and more.
Opacity
<div className={css({ opacity: 0.5 })} />| Prop | CSS Property | Token Category |
|---|---|---|
opacity | opacity | opacity |
Box Shadow
Apply box shadows to elements.
<div className={css({ boxShadow: 'lg' })} />| Prop | CSS Property | Token Category |
|---|---|---|
boxShadow | box-shadow | shadows |
shadow | box-shadow | shadows |
shadowColor | --shadow-color | colors |
Mix Blend Mode
Control the blending mode of an element.
<div className={css({ mixBlendMode: 'multiply' })} />| Prop | CSS Property | Token Category |
|---|---|---|
mixBlendMode | mix-blend-mode | none |
Filter
Apply various filters to elements.
<div className={css({ filter: 'auto', blur: 'sm' })} />| Prop | CSS Property | Token Category |
|---|---|---|
filter | filter | none |
blur | --blur | blurs |
brightness | --brightness | none |
contrast | --contrast | none |
grayscale | --grayscale | none |
hueRotate | --hue-rotate | none |
invert | --invert | none |
saturate | --saturate | none |
sepia | --sepia | none |
dropShadow | --drop-shadow | dropShadows |
Backdrop Filter
Apply filters to the backdrop of an element.
<div className={css({ backdropFilter: 'auto', backdropBlur: 'sm' })} />| Prop | CSS Property | Token Category |
|---|---|---|
backdropFilter | backdrop-filter | none |
backdropBlur | --backdrop-blur | blurs |
backdropBrightness | --backdrop-brightness | none |
backdropContrast | --backdrop-contrast | none |
backdropGrayscale | --backdrop-grayscale | none |
backdropHueRotate | --backdrop-hue-rotate | none |
backdropInvert | --backdrop-invert | none |
backdropOpacity | --backdrop-opacity | none |
backdropSaturate | --backdrop-saturate | none |
backdropSepia | --backdrop-sepia | none |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
Animation · 15
| Property | Shorthand | Class | Values |
|---|---|---|---|
| animation | — | anim | animations |
| animationComposition | — | anim-comp | — |
| animationDelay | — | anim-dly | durations |
| animationDirection | — | anim-dir | — |
| animationDuration | — | anim-dur | durations |
| animationFillMode | — | anim-fm | — |
| animationIterationCount | — | anim-ic | — |
| animationName | — | anim-n | keyframes |
| animationPlayState | — | anim-ps | — |
| animationRange | — | anim-r | — |
| animationRangeEnd | — | anim-re | — |
| animationRangeStart | — | anim-rs | — |
| animationState | — | anim-s | — |
| animationTimeline | — | anim-tl | — |
| animationTimingFunction | — | anim-tmf | easings |
Effect · 21
| Property | Shorthand | Class | Values |
|---|---|---|---|
| backdropBlur | — | bkdp-blur | blurs |
| backdropBrightness | — | bkdp-brightness | — |
| backdropContrast | — | bkdp-contrast | — |
| backdropFilter | — | bkdp | auto |
| backdropGrayscale | — | bkdp-grayscale | — |
| backdropHueRotate | — | bkdp-hue-rotate | — |
| backdropInvert | — | bkdp-invert | — |
| backdropOpacity | — | bkdp-opacity | — |
| backdropSaturate | — | bkdp-saturate | — |
| backdropSepia | — | bkdp-sepia | — |
| blur | — | blur | blurs |
| brightness | — | brightness | — |
| contrast | — | contrast | — |
| dropShadow | — | drop-shadow | dropShadows |
| filter | — | filter | auto |
| grayscale | — | grayscale | — |
| hueRotate | — | hue-rotate | — |
| invert | — | invert | — |
| mixBlendMode | — | mix-bm | — |
| saturate | — | saturate | — |
| sepia | — | sepia | — |
Shadow · 1
| Property | Shorthand | Class | Values |
|---|---|---|---|
| boxShadow | shadow | bx-sh | shadows |