Effects

Box Shadow

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

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

4
// token values
5
<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.

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

Opacity

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

1
<Box opacity="0.5" />

Mix Blend Mode

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

1
<Box bg="danger.bg.initial">
2
  <Image src="..." mixBlendMode="hard-light" />
3
</Box>