В таких штуках самое главное - это свести цвета на пересечениях линий. Просто вставить линии-градиенты на всю ширину-высоту таблицы картинками тут не прокатит т.к. пропорции ячеек могут меняться и цвета на пересечениях будут расходиться. Вариант наложить на всю сетку SVG-маску тоже отпадает по этой же причине - она будет расходиться с пропорциями конкретных ячеек и будет ломаться логика, в каких пределах должно происходить затемнение. Поэтому, вне зависимости от выбора CSS-свойств, все будет сводиться к одной и той же идее, что мы должны сделать границы для всех ячеек в центре стандартным образом, а для первой и последней колонки и первой и последней строки нарисовать кастомные границы. Как вариант:
Код с повторениями почти одного и того же, вероятно его можно сократить в какой-нибудь хитрый миксин, но конечная идея примерно такая.
P.S.: И тут, по хорошему, стоит уточнить у дизайнера, как он видит длину затемнения в процентах от длины ячейки, особенно когда они сильно отличаются по пропорциям. Здесь градиенты от края до края, но, возможно, что в вашем случае нужно делать градиент не от 0% до 100%, а от 0% до какого-то другого значения, возможно зависящего от размера шрифта, а дальше уже заканчивать одним цветом.
Простой
