Shadows
The list of available shadow tokens
Semantic Tokens
Chakra UI supports these semantic tokens out of the box.
theme.semanticTokens.shadows
xs
sm
md
lg
xl
2xl
inner
inset
Here’s an example of how to add new shadows.
export const system = createSystem(defaultConfig, {
theme: {
semanticTokens: {
shadows: {
custom: {
value: {
_light: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
_dark: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
},
},
},
},
},
});