Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

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" />
PropCSS PropertyToken Category
shadows, boxShadowbox-shadowshadows
shadowColor--shadow-colorcolors

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" />
PropCSS PropertyToken Category
shadowColor--shadow-colorcolors

Opacity

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

<Box opacity="0.5" />
PropCSS PropertyToken Category
opacityopacityopacity

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>
PropCSS PropertyToken Category
mixBlendModemix-blend-mode-

Previous

Display

Next

Filters