Effects

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

AI TipWant to skip the docs? Use the MCP Server

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`	-