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.

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.