Back to Chakra Ui

Color opacity modifier

apps/www/content/docs/styling/color-opacity-modifier.mdx

0.3.0-beta896 B
Original Source

Every color related style property can use the color-mix shortcut to apply opacity to a color.

Syntax

The general syntax is {color}/{opacity}. For example: bg="red.300/40".

Usage

tsx
<Text bg="red.300/40" color="white">
  Hello World
</Text>

This will generate something like this:

css
.css-sxdf {
  --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
  background: var(--mix-background, var(--colors-red-300));
  color: var(--colors-white);
}

CSS Variables

This feature can be used in css variables as well. This is useful for creating one-off color token in a component.

The token reference syntax {} is required for this to work.

tsx
<Box css={{ "--bg": "{colors.red.400/40}" }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" />
</Box>