UI Design

How to Create Beautiful Shadows in UI Design

Great designers know that shadows should never look unnatural, as default shadows often do. Instead, they take the time to refine and customize them. In this article, we’ll explore how to create beautiful shadows in UI design that enhance depth and realism in your projects.

Illustration of a UI drop shadow interface with settings for X, Y, Blur, Spread, and Opacity, alongside a 3D hand holding a pink object.

Soften Shadows

To create beautiful shadows in UI design, you should start by softening them. Reduce the opacity and increase the blur to make them look more natural.

Comparison of two UI drop shadow settings: one with excessive blur, and the other optimized for balanced visibility.

Soften the shadows by reducing the opacity and increasing the blur⁠

Inject a Hue

In the real world, shadows are rarely pure black. Adding a subtle hue to your shadows makes them more realistic and visually pleasing.

Contrast between two shadow colors in UI design: a harsh black shadow and a more visually subtle grey shadow.

Inject a hue into shadows to mimic the rea world⁠

Blur Layers

Blur the layers to create beautiful shadows in UI design. Use layer blur techniques to generate soft and realistic image shadows.

A side-by-side illustration comparing an astronaut holding a heart with flat shadows versus softer ambient shadows for depth.

Generate image shadows by blurring the layers

Advanced Figma Video Course

Become a Figma master and skyrocket your design skills

Master advanced Figma strategies while achieving superior efficiency and productivity as a designer! Advanced Figma Video Course is a hands-on, engaging, and practical video course teaching you everything you need to know to be a confident Figma user and a better designer.

View Details

Mimic the Real World

Every shadow has two components: one created by directional light and another by ambient light. Mimicking this duality helps you craft realistic shadows.

Visualization of directional, ambient, and combined shadow effects in UI design, highlighting the importance of layering techniques.

Use combined directional and ambient shadows⁠

Define Elevation

Signal different elevation levels by adjusting opacity and blurriness. Smaller, sharper shadows indicate lower elevation, while larger, blurrier shadows signal higher elevation.

Define different levels of elevation to introduce hierarchy ⁠

Shadow Styles

Shadow styles help maintain consistency and reuse design rules. To create beautiful shadows in UI design, follow these steps in Figma:

Add a drop shadow
Press the styles icon
Create the style

Interface displaying the creation of a shadow effect style in a design tool, with editable fields for naming and description.

Styles help us reuse design rules and stay consistent in our UIs

Mastering the art of shadows is essential to creating depth and dimension in your designs. By following these tips, you can create beautiful shadows in UI design that are natural, consistent, and visually appealing. Start experimenting today to elevate your UI projects.

For other valuable educational resources, explore our Learn section. Here, we offer heaps of courses, workbooks, and other resources that will help you improve your skills in UX/UI.
Happy designing! 🤗