Effects

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