Effects

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" />

Box Shadow Color

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" />

Opacity

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

<Box opacity="0.5" />

Mix Blend Mode

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>