Add depth and visual interest to your designs with shadows, blurs, and other effects. Effects are non-destructive and can be edited or removed at any time.
Adding Effects
- Select an element
- In Properties Panel, find the Effects section
- Click the + button
- Choose an effect type
- Adjust the parameters
Drop Shadow
Drop Shadow
Adds a shadow behind the element, creating the illusion of elevation.
- X Offset - Horizontal shadow position
- Y Offset - Vertical shadow position
- Blur - Shadow softness (0 = sharp edge)
- Spread - Shadow size expansion
- Color - Shadow color and opacity
Creating Realistic Shadows
For natural-looking shadows:
- Use positive Y offset (shadow below element)
- Keep X offset small or zero
- Use dark colors with 10-30% opacity
- Blur should be 2-4x the offset amount
Low: 0, 2px blur, 4% opacity. Medium: 0, 4px, 8px blur, 8% opacity. High: 0, 8px, 16px blur, 12% opacity. Stack multiple shadows for more realistic depth.
Inner Shadow
Inner Shadow
Creates a shadow inside the element, giving an inset or pressed appearance.
- X Offset - Horizontal position
- Y Offset - Vertical position
- Blur - Shadow softness
- Color - Shadow color
Use Cases
- Pressed button states
- Input fields
- Inset panels
- Debossed text effects
Layer Blur
Layer Blur
Blurs the entire element. Useful for background effects and focus indication.
- Amount - Blur radius in pixels
Background Blur
Background Blur
Blurs content behind the element (frosted glass effect). The element itself stays sharp.
- Amount - Blur radius
Frosted Glass Effect
- Create a rectangle over your background
- Set fill to white with 50-80% opacity
- Add background blur (8-20px)
- Optional: add subtle border
Background blur only works when there's content behind the element. It won't show anything if the element is over empty canvas.
Multiple Effects
Stack multiple effects on one element:
- Click + to add additional effects
- Each effect applies independently
- Order matters—drag to rearrange
- Toggle visibility with the eye icon
Layered Shadow Technique
Create more realistic shadows by stacking:
- Large, soft, light shadow (ambient)
- Medium shadow at offset (main shadow)
- Small, dark shadow close to object (contact shadow)
Effect Visibility
- Eye icon - Toggle effect on/off without deleting
- Opacity in color - Fade effect intensity
- Delete - Remove effect entirely
Copying Effects
Copy effects between elements:
- Select element with effects
- Edit → Copy (or
⌘/Ctrl + C) - Select target element
- Edit → Paste Style (or
⌘/Ctrl + Alt + V)
This copies all styling including fills, strokes, and effects.
Performance
Effects can impact performance with many elements:
- Large blur values are more intensive
- Background blur is particularly expensive
- Consider using images for complex static effects
- Hide effects while working if canvas feels slow