When should I use colored shadows instead of classic neutrals?


Using colored shadows in UI design can be beneficial in certain situations to enhance the visual appeal, convey meaning, or create a specific atmosphere. However, it's important to use colored shadows judiciously and considerately. Overusing them or using inappropriate colors can lead to visual clutter or confusion. Additionally, always ensure that the colors and contrasts you choose meet accessibility standards and are inclusive for all users.

Detailed answer

Using colored shadows in UI design can enhance visual appeal, convey significance, or create a specific mood in certain situations. Here are some simple steps for creating impressive shadows:

Create visual hierarchy 

Colored shadows can be used to create a sense of depth and hierarchy within the UI elements. By using shadows of varying colors, you can draw attention to important elements or actions.

Provide visual feedback

Colored shadows can provide visual feedback to users, indicating actions or states. For example, a red shadow around an error message can signal an issue that needs attention, while a green shadow around a confirmation message can convey success.

A visualization of the form where red shadow is used for an error state.


Consider thematic design

In UIs with a thematic design, such as gaming interfaces or creative applications, colored shadows can contribute to the overall theme and create a more immersive experience.

An interface of the gaming app where colorful shadows are used to reflect the thematic design.


Enhance aesthetic appeal

Sometimes, colored shadows are simply used to add visual interest and make the UI more visually appealing, especially in designs where creativity and innovation are emphasized.

Make shadow color more natural

Pure grey rarely looks good (except in a strict black-and-white theme). In the real world, shadows always have a hint of color. By adding a touch of your UI's neutral tone to the shadow, you can achieve a more natural and appealing look.

Parameters that show usage of the UI's neutral tone to shadow for a more natural and appealing look.


Make material colors as shadow

Observe materials in the real world, especially semi-transparent ones. Their shadows take on the color of the object. You can use these tones to illustrate such materials, giving your design a fresh and realistic look.

An example of a gradient shadow.


Related reading: When should I use colors alone to create visual depth, without relying on shadows?

🤝 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!

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent