Scroll Edge Effects, Not Hard Dividers
SHOULD: Where floating chrome overlaps scrolling content, fade the seam with a short `mask-image` gradient instead of drawing a 1px divider under the sticky header — content should recede under the chrome, not be guillotined by a rule that claims it ends there. Apply the mask ONLY where floating UI actually overlaps content; a fade at an edge nothing floats over just eats readable text.
Where floating chrome overlaps scrolling content, fade the content out with a mask instead of drawing a 1px rule under the header
.scroller { mask-image: linear-gradient(to bottom, transparent 0, #000 48px); }Bad
Good
Why it matters
A hard border under a sticky header is a claim that the header is a boundary — that content ends there. It does not; content continues underneath, and the border cuts it. What the eye wants at that seam is evidence of depth: the content should recede under the chrome rather than being sliced by it. A short `mask-image: linear-gradient(...)` on the scroll container (or an equivalent gradient overlay) fades the last few pixels of content to transparent exactly where the floating chrome sits over it, so a scrolling line of text dissolves under the header instead of being guillotined by a rule.
Note the last clause of the rule, which is the part that stops this becoming decoration: only where floating UI actually overlaps content. A mask at an edge nothing floats over is a gratuitous fade that eats readable text. Also worth reading against design-impeccable-hairline-plus-shadow: that principle bans a hairline and a soft shadow together and tells you to commit to one of them — but both of its options are still a drawn edge, and neither proposes the mask. This is the third answer it never offers, and at the one seam where the other two are both wrong.