Effects (Shadows & Blurs)
Add drop shadows, inner shadows, layer blurs, and background blurs to enhance depth and dimension.
Design
No shortcutBeginner8 min readQuick Reference
Effects (Shadows & Blurs)
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Beginner-Friendly⏱ 15–30 minutes to master
Key Settings
Drop shadow:Inner shadow:Layer blur:Background blur:
Effects in Figma include drop shadows, inner shadows, layer blurs, and background blurs. They add depth, realism, and visual hierarchy to your designs.
Where to Find It
Select a layer and click the + icon next to Effects in the Design panel, or click the Effects section.
How to Use
- Drop shadow: Creates a shadow behind the layer. Adjust X/Y offset, blur, spread, and color.
- Inner shadow: Creates a shadow inside the layer's edges. Good for inset effects.
- Layer blur: Blurs the layer content. Adjust the blur radius for the intensity.
- Background blur: Blurs content behind the layer. Perfect for glass morphism effects.
Pro Tips
- Use background blur with semi-transparent fills for the popular glass morphism effect.
- Save effects as styles for consistent shadow systems across your design.