shadow-algorithm.css

--shadow-color:
  var(--h) clamp(0%, var(--s), 50%) 50%;

.shadow-small {
  filter: 
    drop-shadow(0.5px 1px 1px hsl(var(--shadow-color) / 0.7));
}

.shadow-medium {
  filter: 
    drop-shadow(
      1px 2px 2px hsl(var(--shadow-color) / 0.333)
    )
    drop-shadow(
      2px 4px 4px hsl(var(--shadow-color) / 0.333)
    )
    drop-shadow(
      3px 6px 6px hsl(var(--shadow-color) / 0.333)
    );
}

.shadow-large {
  filter: 
    drop-shadow(
      1px 2px 2px hsl(var(--shadow-color) / 0.2)
    )
    drop-shadow(
      2px 4px 4px hsl(var(--shadow-color) / 0.2)
    )
    drop-shadow(
      4px 8px 8px hsl(var(--shadow-color) / 0.2)
    )
    drop-shadow(
      8px 16px 16px hsl(var(--shadow-color) / 0.2)
    )
    drop-shadow(
      16px 32px 32px hsl(var(--shadow-color) / 0.2)
    );
}