2

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:

enter image description here

And a cut-in dimple effect with dark colors:

enter image description here

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.

3

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

enter image description here

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.

Showing differences in shadow sizes

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.

enter image description here

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.

3D list items

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.

|improve this answer|||||
  • Thanks for the answer. I've used the fatter box shadows for things like hover menus and modal overlays and they work well for that. The problem with the slight shadow for low elevation is that it often reads as a gray box around the element rather than a white element that is slightly elevated. It's also sort of fuzzy. I was hoping there would be a way to create a crisp, sharp elevation change, like in the dark examples above. A sharp crease, without it looking like a border. – Nick Feb 15 '15 at 17:14
  • @Nick I added some other methods you can use to create the effect you're looking for – Zach Saucier Feb 15 '15 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.