How can I make a white background area appear raised against a white background?

Question

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.

Answer 1

To contrast between two white sections, I use shadows very similarly to how Google does in their material design guidelines.

The amount of shadow depends on how pronounced you want the element to be. The following image shows the top element very elevated while the other is only slightly so.

This can, of course, work for colored elements as well, so there is little difference between layering objects on a white background as opposed to a color one.

_{Images from Google's material design guidelines.}

Changing the background to an off white like the light grey Google does in this example also helps provide a more raised feel.

If you're working on the web, you can create these types of shadows using a box-shadow. Brendan Landis recreated some of Google's examples in SCSS, but you can easily pull the values if you don't want to use SASS.

As for the format of a box-shadow itself, the format is as follows, ? means it's optional:

box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?] ]#

For this type of shadow, you want to use a good bit of blur-radius and usually some offset-y to push the shadow down a bit.

---

Since you're worried about the shadows being "fuzzy" or it not being interpreted as a white element, you could instead use a small grey border between elements; something like border-left:1px solid rgb(150,150,150) works well. You could also use a subtle off white to light grey gradient to convey an elevated look; something like background-image: linear-gradient(top, #f7f7f7, #e7e7e7) (with prefixes) works alright (I pulled the gradient from this post). Here's a demo using these on some list items. You can even combine this with some shadows to make it especially pronounced.

Ultimately using a combination of the things mentioned in this answer should get you the look you're wanting. Since we can't picture exactly what it is you're wanting to create we can't give you exactly what you want - it'll take some playing around.