What are the different types of shadows and when should each be used?
TL;DR
- There are two primary types of shadows: drop shadows and inner shadows.
- Drop shadows, which include hard and soft variants, create depth by making an element appear elevated above others. This effect enhances focus and separation.
- Hard shadows are less common, potentially cluttering the visual design. They are suitable for clear separation in elements like video player controls, or when elements such as modal dialog boxes overlay other content.
- Soft shadows, more prevalent in modern design, offer a lighter, more natural look useful for interactive elements like modals, buttons and cards.
- Inner shadows, on the other hand, give a recessed effect, ideal for designing states like disabled buttons or inset form fields, and improve accessibility by providing depth cues.
Detailed answer
The primary types of shadows used in design are drop shadows and inner shadows, each with its variations and specific use cases.
Drop shadows
Drop shadows create a sense of depth because the object is raised above the objects behind it. They help in distinguishing the element from its background, making it stand out and grabbing user attention effectively. There are two main types of drop shadows: hard and soft shadows.
Hard shadows
Hard shadows mimic the effect of light shining directly on an object. They have a sharp, clear, and dark boundary close to the shape of the object casting them. Hard shadows are rarely used in modern interface design because they can appear unrealistic and overly dramatic, potentially cluttering the visual design.
However, they can be useful in scenarios where a stark separation between elements is necessary. This is particularly effective with interactive elements like video player controls, or when elements such as modal dialog boxes or dropdown menus overlay other content.
Soft shadows
Soft shadows are more diffused and mimic ambient light, making them less prominent than hard shadows. They fade at the edges with nearly invisible boundaries, resulting in a more realistic appearance.
Soft drop shadows are more common in contemporary design. The softness increases the perception of distance between layers, which is very effective for cards, modals, and buttons. When used correctly, soft drop shadows can enhance usability by subtly denoting clickable elements without overpowering the overall design.
Inner shadows
Inner shadows are cast inside the edges of an object. This type of shadow creates a recessed effect, making it appear as if the object is carved into the surface or backlit.
Inner shadows are particularly effective in designing elements in specific states, such as disabled or incomplete, indicating inset elements like input fields in forms where the shadow suggests an interactive area for text entry. It enhances accessibility by providing depth cues within interface elements without relying solely on color contrast.
Pro tip: The more you increase the blur and spread of an inner shadow, the more the element appears to be "sunken" into the surface.
🛠️ Useful tools
These tools will make your job easier and more effective.
Smooth shadow tool – make smooth shadows (Figma plugin is available).
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
Intro to Shadows by Uxcel
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.
How To Use Shadows And Blur Effects In Modern UI Design by Smashing Magazine