Default shadow in Figma looks quite harsh and unnatural. For quick shadow, low- or mid-fidelity wireframes only.
For better shadows:
- X, Y, Blur
Soft and blurry light:
0px 4px 16px rgba(0, 0, 0, 0.25)
- Background colors & opacity
Instead of default black, try 0px 4px 16px rgba(22, 22, 22, 0.1)
- Elevation levels
- Elevation 0: /
- Elevation 1: 0px 2px 4px rgba(22, 22, 22, 0.1)
- Elevation 2: 0px 4px 16px rgba(22, 22, 22, 0.1);
- Elevation 3: 0px 10px 24px rgba(22, 22, 22, 0.1)
- Colors
If an object has colors, shadow in a shade of that color is better.
- Elevation 1: 0px 2px 4px rgba(190, 148, 0, 0.24)
- Elevation 2: 0px 4px 16px rgba(190, 148, 0, 0.24)
- Elevation 3: 0px 10px 24px rgba(190, 148, 0, 0.27)
For lighter colors, use a darker variant for shadow instead.
Source: https://seppewera.medium.com/4-steps-for-better-shadows-in-figma-4dccdb3355a1