Quick tool: Shadow Palette Generator

Josh Comeau’s Shadow Palette Generator builds on a simple idea: box-shadow looks better when you stack multiple, slightly tinted layers — similar to how eased gradients beat flat ones. The tool goes a step further by generating three shadow tiers to simulate different “heights,” then packages them as reusable CSS custom properties. That configuration approach echoes what you’d get from a design-token library like Open Props.

The link above includes the generator itself. Some output shadows rely on the spread value (the fourth length), which text-shadow doesn’t support. But if you strip out those numbers, the same palette generally works for text shadows, too.