An edge that fades instead of cutting
CaveatTwo edges need two gradients, and the default mask-composite: add unions them — the union of "everything but the left" and "everything but the right" is everything, so both fades disappear and it reads as the property having done nothing. intersect is the whole fix. Then watch the shorthand: mask resets every longhand it does not name, mask-composite included, so a shorthand written after it silently throws the second gradient away. And a mask clips the element's entire painting, so the focus ring on the last chip fades out with the chip while the chip stays tabbable — invisible and fully interactive at the same time.
FallbackWithout support the row keeps hard edges, which is what every scroller looked like until recently and is still perfectly usable. That is the right way round: the fade is a hint that there is more, never the only one. Pair it with a scrollbar you have not hidden, or the affordance is decoration that some engines simply do not draw.
.row {
overflow-x: auto;
/* one gradient per edge */
mask-image:
linear-gradient(90deg, #0000, #000 26px),
linear-gradient(-90deg, #0000, #000 26px);
/* add unions them, and the union
of the two is no mask at all */
mask-composite: intersect;
}Published
Questions
Why do both of my mask gradients cancel out?
mask-composite defaults to add, which unions the masks. The union of "everything except the left edge" and "everything except the right edge" is everything, so nothing is masked. Set mask-composite: intersect.
Why did my mask stop working when I tidied it into the shorthand?
mask resets every longhand it does not mention, including mask-composite, so a shorthand written after it drops you back to add. Put the shorthand first, or use longhands only.
Can someone still tab to a chip that has faded out?
Yes. A mask changes painting, not hit testing or focus order, so the invisible chip is still focusable and the focus ring fades with it. Keep the fade shallow, and never let it be the only sign that the row scrolls.