The macOS edge
Why a popup needs two lines and a shadow to feel like an object, and how to fake the one Apple's menus have.
In 20 seconds
Why your eye needs a clear edge to see a popup as \
The three thin layers that turn a flat box into an object.
How to build it once and have it work in light and dark.
Your eye splits things before you think
Look at any screen and your brain does something before you've read a single word: it splits what you see into a thing and the background behind it. Psychologists call it figure and ground, and it was described over a century ago.
A popup is a figure. It's supposed to sit on top. When its edge is clear, your brain files it as "the thing I just opened" for free. When the edge is fuzzy, your brain has to work a little to find where it starts and stops. It's tiny work, but you feel it as "this looks cheap" or "is this broken?"
A popup needs a visible edge, or it looks like it's part of the page instead of floating above it.
See it melt
Here's the same menu on a dark page, the place this goes wrong most. Flip between the two.
Bad: Same color as the page, so the edge disappears.
Bad: A big soft shadow is dark on dark: you can't see it.
Bad: Your eye has to hunt for where the menu ends.
Good: A light line just inside catches the light, like the rim of a glass.
Good: A dark hairline just outside separates it from anything behind.
Good: A small shadow drops down, so it looks lifted, not glowing.
Why three thin lines beat one big shadow
Shadows are how we fake depth in light mode. In dark mode they mostly vanish, because a shadow is just a darker area and the page is already dark. Google's Material Design gave up on shadows alone in dark themes for exactly this reason and tints surfaces lighter as they rise instead.
There's an accessibility angle too. The web's accessibility rules ask for at least 3 to 1 contrast on the edges of controls you need to see to use. A soft shadow almost never gets there. A crisp line can.
Depth isn't one big shadow. It's three small lines that agree.
How to build it
A dark hairline outside. One pixel, a bit darker than whatever is behind. It draws the outline.
A light line inside. One pixel of white at low strength. It's what makes the surface feel like a solid thing.
Two small shadows, no spread. Offset downward, so the light seems to come from above. Spread makes it glow instead.
Put it in one token and use it on every popover, menu, select and dialog, so they all feel like the same material.
Mistakes I see a lot
A border the same color as the page. It looks like a border in light mode and disappears in dark.
Fixing it with a bigger shadow. Bigger and blurrier just makes a glow. Make the edge clearer instead.
Every popup with its own shadow. Menus, selects and tooltips should feel like the same material.
Checking only in light mode. Always flip to dark. That's where edges die.
Sources
[1] Synsoplevede Figurer (Visually experienced figures). Edgar Rubin. Gyldendal, Copenhagen, 1915.
[2] Understanding Success Criterion 1.4.11: Non-text Contrast. W3C. WCAG 2.2, 2023. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
[3] Elevation. Google. Material Design 3, accessed 2026. https://m3.material.io/styles/elevation/overview
| GreedUI | ||
|---|---|---|
| I can explain why popups melt into the page in dark mode. | I know the three layers that make an edge. | I'd put the recipe in one shadow token and use it everywhere. |
| Same color as the page, so the edge disappears. | A big soft shadow is dark on dark: you can't see it. | Your eye has to hunt for where the menu ends. |
| A light line just inside catches the light, like the rim of a glass. | A dark hairline just outside separates it from anything behind. | A small shadow drops down, so it looks lifted, not glowing. |
| A bigger, blurrier shadow | A light line inside and a dark hairline outside | Making the popup pure white |
Full component index: llms.txt