When working with dark themes, it's easy to make areas appears to be raised or sunken by changing the background color of the raised or sunken area slightly, and by adding borders to the top and bottom with two different lines such as #292929 over #3d3d3d to create a cut-in line and the inverse to create a ridge highlight.
I'm trying to be able to create a similar effect for white(ish) on white(ish), but I'm not finding the right combination of border colors to make the illusion work.
Part of the problem is rendering dependencies between monitors. The dark assets read as raises and dimples on many monitors, but some monitors seem to have very few steps between light gray and white, which causes what looks like white on one monitor to appear as gray on another and vis versa.
Since this is for website graphics, I'm looking for a color combination that is sharp/simple enough to appear as raised or inset regardless of slight differences in monitor contrast ratio.
Here's an example of a raised effect with dark colors:
And a cut-in dimple effect with dark colors:
I'd like to know what technique can be used to create these same effects where both the background and raised areas are (perceptibly) white.