Create better shadows in Figma in 4 easy steps

The default (drop) shadow settings in Figma don’t really feel right. There are some reasons for this. Let’s look at how you can do shadows the correct way.

Follow for more Figma tips!

0 | AS IS in Figma

The default settings in Figma are as follows:

• 0px 4px 4px rgba(0, 0, 0, 0.25)

Compared to no shadow, it’s solid, yet it doesn’t feel quite right; it’s harsh and unnatural. If you want a quick shadow on a card, Figma’s default settings will do the job. This one is also great for low- or mid fidelity wireframes.

Great for a quick drop shadow

1 | Adjust shadow settings

To fix this, change the settings. In the example below, we adjusted X, Y en Blur settings to give the shadow a natural look. Light isn’t harsh, but soft and blurry. The settings I used are as follows:

• 0px 4px 16px rgba(0, 0, 0, 0.25)

Better, closer, warmer (from Tenacious D’s Kielbasa)

2 | Adjust shadow bg colours & opacity

If you want an even better result, you have to change the colours and opacity of the shadow. The default black (000000) isn’t the best option. Try the following instead:

• 0px 4px 16px rgba(22, 22, 22, 0.1)

Shadows rarely originate form absolute blacks

3 | Create elevation levels

Shadows are shown because a light source casts light on an object. If the object is closer to the surface, the shadow is closer. A blurry shadow appears when the object is further away from the surface. The UI could mimic that:

• Elevation 0: /
• Elevation 1: 0px 2px 4px rgba(22, 22, 22, 0.1)
• Elevation 2: 0px 4px 16px rgba(22, 22, 22, 0.1);
• Elevation 3: 0px 10px 24px rgba(22, 22, 22, 0.1)