The Art of User Interface Drop Shadows

Make your UI look professional

Many elements on interfaces tend to mimic real-world objects. Drop shadows are one of them. These are helpful cues to indicate whether a window or panel is floating. Floating surfaces signify a temporary or momentary state that requires user interaction.

For users to interpret floating surfaces correctly, your shadows must look natural and realistic. There’s an art to drop shadows that most designers don’t know.

Notice how these two surfaces have different drop shadows. The difference may look subtle, but it affects how users perceive the interface. An unnatural shadow like the one on the left will make your interface look less professional. Making your shadows more natural will give your interface a more sleek and polished look.