Drop shadow

Drop shadows can bring your designs to life by adding dimensionality and making elements pop off the screen. They simulate the shadow an object would cast on the surface behind it, providing a sense of space and dimensionality.

To apply a realistic drop shadow to an element:

1. Head to the Effects section in the Design panel.
2. Select Drop shadow from the dropdown.
3. Click on the Effect settings icon on the left of the dropdown to reveal a modal with more settings.
4. Set the opacity to around 8-16% to keep shadows soft.
5. Adjust the blur to 8-12px for a natural blur.
6. Use 2-4px offsets to mimic natural lighting, with X for horizontal light direction and Y for vertical.
7. Opt for a dark grey with adjusted opacity over solid black for a more lifelike shadow. Alternatively, you can use the same color as the element's fill or a branding color of the interface.
8. For spread, a value of 2-4px works well for most designs, adding subtle expansion without overpowering the element.