Arwes LogotypeArwes Logotext

Shadow

The intensity of color shadows in an application component elements can be managed dynamically by the theme shadow utility.

A numeric factor value can be setup for blur and spread shadow values. Then a multiplier for each value can be supplied to get the specific shadow intensity.

tsx
const theme = createTheme({
shadow: {
blur: 2,
spread: 3
}
});
theme.shadow.blur(1); // 2
theme.shadow.blur(2); // 4
theme.shadow.blur(3); // 6
theme.shadow.blur(0); // 0
theme.shadow.spread(1); // 3
theme.shadow.spread(2); // 6
theme.shadow.spread(3); // 9
theme.shadow.spread(0); // 0

By default, both factor values are 1.