CSS Shadow Palette Generator

Create a set of lush, realistic CSS shadows with 2D light joystick and tinting.

Oomph (Richness):0.50

Crispy (Sharpness):0.50

Light Position (2D):0.35, 0.45

Background Color:#F1CFFC

Tint Shadow (Surface Tone):

Resolution (Layer Count):0.75

Shadow Tokens:

:root {
  --shadow-color: 285deg 88% 50%;
  --shadow-elevation-low:
    -0.2px 0.2px 0.3px -0.8px hsl(var(--shadow-color) / 0.027),
    -0.5px 0.7px 1.3px -0.6px hsl(var(--shadow-color) / 0.033),
    -0.9px 1.3px 3.1px -0.5px hsl(var(--shadow-color) / 0.037),
    -1.4px 2.1px 5.9px -0.3px hsl(var(--shadow-color) / 0.042),
    -1.9px 3.0px 9.6px -0.2px hsl(var(--shadow-color) / 0.047),
    -2.4px 4.0px 14.3px 0.0px hsl(var(--shadow-color) / 0.052);
  --shadow-elevation-medium:
    -0.5px 0.6px 0.7px -1.9px hsl(var(--shadow-color) / 0.029),
    -1.3px 1.7px 3.1px -1.5px hsl(var(--shadow-color) / 0.035),
    -2.2px 3.2px 7.5px -1.1px hsl(var(--shadow-color) / 0.040),
    -3.3px 5.1px 14.1px -0.8px hsl(var(--shadow-color) / 0.045),
    -4.6px 7.3px 23.0px -0.4px hsl(var(--shadow-color) / 0.051),
    -5.9px 9.7px 34.3px 0.0px hsl(var(--shadow-color) / 0.056);
  --shadow-elevation-high:
    -1.0px 1.2px 1.4px -4.1px hsl(var(--shadow-color) / 0.032),
    -2.7px 3.6px 6.6px -3.3px hsl(var(--shadow-color) / 0.038),
    -4.8px 6.9px 16.2px -2.4px hsl(var(--shadow-color) / 0.043),
    -7.2px 11.0px 30.5px -1.6px hsl(var(--shadow-color) / 0.049),
    -9.9px 15.7px 49.8px -0.8px hsl(var(--shadow-color) / 0.055),
    -12.7px 21.1px 74.4px 0.0px hsl(var(--shadow-color) / 0.061);
}