I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top light source and others use no shadows. On this very site some fields (question field) use a top light and other fields (tags) have not shadows.

I want to be able to have an well-reasoned conversation with my Creative team about form design standards.

Is there a method that works best?

(Also, I don't like leaving out shadows, as one designer suggests, because it becomes less clear to me if it's really a text field; I wonder if others have the same experience.)


We decided to adopt a top-down light source with most of our designs, although it's not always as dimensional as Apple's 45º angled source.

  • 2
    It's an aesthetic decision for the most part. Artistic license has merit here.
    – DA01
    Dec 15, 2011 at 16:48
  • 1
    The answers coming in are for half the question, but they're good answers. I'm going to ask the second part in a separate question (or just leave it out).
    – Taj Moore
    Dec 15, 2011 at 16:57
  • @DA01 artistic license has merit until it runs counter to psychology and UX, hence the question I'm sure.
    – Ben Brocka
    Dec 15, 2011 at 16:58
  • 1
    @ben agreed, though there just isn't a simple 'this is the right way, this is the wrong way' answer to this.
    – DA01
    Dec 15, 2011 at 17:47
  • Thanks for updating with what you did; I wish more users would share what option they went with and how they went over
    – Ben Brocka
    Apr 24, 2012 at 16:14

4 Answers 4


The general practice of lighting from some modest angle left of completely overhead is old and practical. Renaissance painters for instance, as they became more scientific about depth perception, often chose this lighting technique.

There are a few reasons for the effectiveness of the "just-left-of-noon" light source, I think:

  1. As others stated, and obviously, most of the time (in a daily and an evolutionary sense) humans see things lit from above.

  2. In left-to-right reading cultures, we tend to consume all visuals from left-to-right, whether textual or graphic in nature. Lighting slightly to the left side favors left-to-right scanning, placing the well-lit details where you eye will naturally wander.

  3. Head-on lighting (straight above, or in line with the viewer) obscures shadows behind the objects casting them, which reduces the ability of the viewer to quickly place the object in space. This is one of the problems with photographs taken with a flash that is directly mounted on the camera (and not bounced) - among other things, the results look flatter.

That said, these concerns may not be as important for the goals we often have with our flat screens. Our intended visual cues are often modest - to subtly show that one flat layer is just slightly higher than another, or that this part of the interface puffs out just a hair. Our context is not quite the same as Michaelangelo's!

I have also noticed a move away from left-of-noon to perfectly-noon I think there is good practical reasoning to do so.

enter image description here

In this Google Apps drop-down, the lighting is pure top-down, as shown on the top. In this case, the top-down approach has a key advantage - the drop-shadow can justifiably extend on both sides of the overlay.

My version on the bottom slides the light source to the tradition left-of-noon angle (good old 315° in Adobe products). Here, the left side of the overlay on it's own does not convey that it is above the page (except that is cuts off the text). It's fairly subtle, but personally, I can feel the difference (having just designed one of these myself).

Perhaps the more important perceptual rule in these cases is not about where the light is coming from per se, but rather more generally that when you have two relatively proximate objects, the object perceived as shaded will recede; the lit one will appear closer.

  • 1
    I don't see any shading at all in the dropdowns in your example images... EDIT I was looking in the wrong place, came back after seeing @dammitjim's answer and see them here now.
    – Izkata
    Dec 16, 2011 at 17:54

The standard is that the light source is at the top of an item, as this is where light sources are usually located in real life (the Sun, ceiling lighting). Items lit from below or on top appear unnatural.

Lighting and shadows help controls like buttons look like buttons, and that's what they should do. Whether the light comes from top or a little to the side is less important, however non-uniform light sources make an interface look unnatural. The main reason for the sorta to the left/right lighting and uneven shadows is visual flair. When your visual flair starts to make the interface look unnatural you've gone too far.

The important thing about shadowing and lighting is that they suggest what they are and nothing more. enter image description here

The same applies to these toggles. Shadows and gradients help the user figure out what he’s looking at and how to interact with it. Adding too many details, however, ends up being confusing. The toggle switch is no longer just a toggle switch that is part of a user interface, it is clearly recognizable as a photograph of a specific toggle switch; it loses its meaning. It’s no longer a symbol, it has become a specific thing.

Shadows suggest that things can be clickable, as far as human computer interaction goes, that's all they should do. Lighting from the side or from 45 degrees doesn't have much to do with suggesting affordance at all. It's okay as a visual flair, but going too far can make your interface unnatural or odd, especially since most things on your computer are lit straight from the top (usually).

The problem with slightly skewing your lighting angle is that since there's no standard, it's very easy for your method of lighting to clash with other applications. Therefore the light source being at the exact top is the only logical "standard".

  • So a shadow on font used in say the title indicates that the title is clickable? I think not.
    – JohnGB
    Dec 15, 2011 at 17:54
  • 5
    No, shadows on buttons indicate they are raised up; and thus buttons, which can be pressed in. Inner shadows on buttons indicate they are pressed in. In the case of the slider in the image, shadows indicate the recess, which is the space the slider can move along.
    – Ben Brocka
    Dec 15, 2011 at 18:09

Your question highlights the grey area between "desktop" GUIs and "web" or "web app" GUIs. There is no real standard for showing web-app-like controls in a 3D space. Browser chrome controls, like radio buttons and pulldowns, have desktop-like properties, but links and tags and whatnot typically don't.

The old Apple Human Interface Guidelines (the basics of which everyone else copied) said that the light source on a desktop GUI came from the top left. There's not much shadow shown in this System 7.0 Control Panel example, but the darker edge is on the bottom right, for sure.

System 7.0 Control Panel

With Mac OS X and later iOS, Apple changed the conceptual light source position to directly above, so the shadow gradients are straight up and down.

Mac OS X Control Panel

iOS Icon

  • 1
    I read that with Apple they are above and at a 45º angle in front of the screen, as if hovering over the user's head. That seems consistent with what I see in your examples.
    – Taj Moore
    Dec 15, 2011 at 20:23
  • Apple's Mac HIG state "The perceived light source that is causing the shadows is always directly above the object." For iOS, they say "If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon)."
    – Kit Grose
    Mar 18, 2013 at 6:46

We see in 3 dimensions, and a large part of our image processing (in our brains) is linked to the perceived depth of an item. Shadows make use of that to create a feel of depth, and differentiate an object from its surroundings. If you look at an object in real life with a left or right shadow, it's unlikely that for one shadow you recognise that it hads depth, while not for the other.

So it doesn't really matter much which you choose. What matters is that it looks like it has some depth difference relative to its surroundings. If you have a design reason to make it right, or top, then do that. But when in doubt, if there is even a tacit standard, I would keep to that.

  • That definitely answers half my question (of depth vs. none). Do you have any input on a shift in standards? I want to be able to have an well-reasoned conversation with my Creative team about form design standards.
    – Taj Moore
    Dec 15, 2011 at 16:48
  • We most certainly do not see in three dimensions. We see images, images are by definition two dimensional. Visual cues like shadows and parallax are important because of this; they're 2D cues that suggest three dimensions.
    – Ben Brocka
    Dec 15, 2011 at 16:53
  • Well, to be more specific, we see a pair of completely two dimensional images; there is no third dimension to the sensation that leads to the perception of 3D, there is only the differences between the two 2D images, combined with pure 2D depth cues that lead to the perception of "3D". Beyond that it depends whether you define "seeing" as the act of sensation or of perception.
    – Ben Brocka
    Dec 15, 2011 at 17:01
  • 1
    @BenBrocka: we don't see just as a plane, even with one eye. Our focus changes with depth, and that focus change gives us information.
    – JohnGB
    Dec 15, 2011 at 17:52
  • 2
    Retinas are curves, not planes. And they focus by moving through physical space. There's really nothing 2-dimensional about them. The images in our brain are either dimensionless, as they are simply information, or 3-dimensional, as they exist within a physical processor, but far from 2-D. A 2-D world is as theoretical as flatland. But I digress.
    – Taj Moore
    Dec 15, 2011 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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