<div class="shadow--low"></div>
<div class="shadow--{{name}}"></div>
{
"name": "low"
}
:root {
--shadow-color: 0deg 0% 0%;
--shadow-elevation-low:
0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.1),
0.8px 1px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
1.9px 2.5px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
--shadow-elevation-medium:
0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.11),
1.6px 2px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
4px 5.1px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
9.6px 12.5px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
--shadow-elevation-high:
0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.1),
2.8px 3.6px 5.1px -0.4px hsl(var(--shadow-color) / 0.1),
5.3px 6.8px 9.7px -0.7px hsl(var(--shadow-color) / 0.1),
8.6px 11.1px 15.8px -1.1px hsl(var(--shadow-color) / 0.1),
13.8px 17.8px 25.3px -1.4px hsl(var(--shadow-color) / 0.1),
21.5px 27.8px 39.5px -1.8px hsl(var(--shadow-color) / 0.1),
32.8px 42.3px 60.2px -2.1px hsl(var(--shadow-color) / 0.1),
48.2px 62.3px 88.6px -2.5px hsl(var(--shadow-color) / 0.1);
}
div[class^="shadow"] {
border: 1px solid var(--color-charcoal);
height: 300px;
width: 300px;
}
.shadow--low {
box-shadow: var(--shadow-elevation-low);
}
.shadow--medium {
box-shadow: var(--shadow-elevation-medium);
}
.shadow--high {
box-shadow: var(--shadow-elevation-high);
}
Taken from Shadow Palette Generator by Josh Comeau. See the acompanying article