Effects

JSX style props for styling box shadows, opacity, and more

Box Shadow

Use the shadow or boxShadow prop to apply a box shadow to an element.

// hardcoded values
<Box shadow="12px 12px 2px 1px rgba(0, 0, 255, .2)" />

// token values
<Box shadow="lg" />

Prop	CSS Property	Token Category
`shadows`, `boxShadow`	`box-shadow`	`shadows`
`shadowColor`	`--shadow-color`	`colors`

Use the shadowColor prop to set the color of a box shadow. This prop maps to the --shadow-color CSS variable.

<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />

Prop	CSS Property	Token Category
`shadowColor`	`--shadow-color`	`colors`

Use the opacity prop to set the opacity of an element.

<Box opacity="0.5" />

Prop	CSS Property	Token Category
`opacity`	`opacity`	`opacity`

Use the mixBlendMode prop to control how an element's content should be blended with the background.

<Box bg="red.400">
  <Image src="..." mixBlendMode="hard-light" />
</Box>

Prop	CSS Property	Token Category
`mixBlendMode`	`mix-blend-mode`	-