It's common to use the terms drop shadows, inner shadows, glows, etc - these are all well known and understood

An effect you see all the time is:

  1. a border around
  2. on the top and left, it's a darker color
  3. on the bottom and right, it's lighter than the color in (2)

enter image description here

Skeumorphically, it's symbolically as if the panel is pushed in a few millimeters and of course the falling light causes that side "edges" to be darker (perhaps even a small shadow) and on the far side lighter.

Often the panel "pushed in" is made slightly darker or different..

enter image description here

Anyway, we all see this everywhere -- but what's the best term for this?

As I say, there are clear popular terms for inner shadow, outer shadow, drop shadow, glow, frame, etc. What the heck do you call this?

I can only think of using "emboss" or "pressed" or "pit" in some way; I don't know the answer.

footnote - i quickly made the image above very badly for the sake of posting this question; I'd never use horrible corners and messy lines like that!!

  • 1
    What about well? – Larivact Sep 27 '15 at 14:58
  • What about inset shadow? – passatgt Sep 27 '15 at 16:26
  • Honestly "tray" is a good of term as any. Makes sense. – DA01 Sep 27 '15 at 21:57
  • Hey DA whassup - you know, it's definitely an iOS dev term; I really think it's pretty unclear to use that. (Also - really it doesn't really look like a tray to me!) I think Das has the answer..) – Fattie Sep 27 '15 at 22:17
  • Hi passatgt .. you know, that does kind of make sense when you think about it; what do others think? It tends to confuse me thought with "inner glow". Also a shadow is only on two sides you know .. it's almost like two inner shadows, or something – Fattie Sep 27 '15 at 22:20

Stylistically, the visual design term for that is debossing.

| improve this answer | |
  • 3
    This is fantastic. (What the hell are you doing suggesting "tray" in the comment? :-) – Fattie Sep 27 '15 at 22:17
  • Sorry men I'd forgot to tick an answer here. Thanks again! Wish I could tick both!! – Fattie Dec 31 '15 at 14:45

Bootstap uses the term "well" to describe these. http://getbootstrap.com/components/#wells

A well is a container in that causes the content to appear sunken or an inset effect on the page.

| improve this answer | |
  • nice one Das !! – Fattie Sep 27 '15 at 18:29
  • Note that Bootstrap is using a slightly different effect, however. Instead of showing debossed edges, its using an inset shadow. – DA01 Sep 27 '15 at 21:56
  • @DA01 True, it does differ depending exactly how you want it implemented. I will say that I have never heard a dev while wireframing describe an element as a debossed element, they simply say "a well". But when it comes down to it your answer is more accurate for this case. I think debossing may be a term more widely known by designers than devs, or perhaps "well" is just a more generic term. – DasBeasto Sep 28 '15 at 13:36

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.