Add object shadows
Add object shadows to design elements, then adjust offset, angle, blur, and color to create depth or glow effects.
Object shadows add depth and a sense of realism to a design by mimicking the way light falls on real objects. Use them to give viewers a visual cue about how elements sit in relation to each other on your artboard.
Add a shadow
Select the element you want to add a shadow to.
Open the right panel and find the Shadow section.
Click the plus icon next to Shadow to add it.
A shadow is applied straight away with a default look that you can then customize.
Adjust the shadow
Click the color swatch to open the color picker and set the shadow's color and opacity.
Use the Offset, Angle, and Blur sliders to shape the shadow.
Lowering the opacity softens the shadow into a subtle, pastel-like tint, while keeping it at 100% gives a bold, solid shadow. Pushing the offset further out while using a bright color can turn the shadow into a glow along one edge of your element instead of a traditional drop shadow, so it's worth experimenting if you want something other than a classic look.
Remove a shadow
Click the minus icon next to Shadow to remove it from your element.
Expected outcome
Your selected element shows a shadow that updates live as you adjust the color and sliders.
Troubleshooting
I can't see the shadow I applied
Check that the offset and blur aren't both set to zero, since a shadow with no offset or blur can sit invisibly behind its element. Also make sure the shadow color has enough contrast with your background, low-contrast shadows can be easy to miss.
Common questions
Can I add a shadow to text as well as objects?
Text has its own dedicated shadow controls. See Text shadow effects for how to apply and adjust those.
Related articles