Drop shadows can easily clutter your design and make it look muddy. By simply layering slightly lighter gray shades on top of a dark background, you create a realistic sense of depth and elevation. It looks much cleaner and feels incredibly satisfying to browse.
1
Plan your shades from bottom to top
Decide on your colors step-by-step. Keep the main background pitch black, make the cards slightly lighter, and make pop-ups even lighter. Always use solid opaque colors instead of semi-transparent layers to keep the gray shades vibrant and clean.
Implementation snippet
:root {
--surface-base: #000000;
--surface-raised: #0A0A0A;
--surface-active: #141414;
}