Effects
Add shadow effects to elements using Visual mode for interactive multi-layered shadows or Form mode for precise numerical control.
Shadow Effects
| Icon | Tool | Description |
|---|---|---|
 | Shadow Effect | Two tools for creating shadows. Switch between them using the tabs at the top of the shadow effect modal. |
Visual Mode
Interactive tool for creating beautiful, multi-layered shadows with a natural look.
- Interactive Preview: Drag the light source indicator (pink circle) to position your shadow. Shadow is cast opposite to light source.
- Distance: How far shadow extends (0–80px). Higher = longer shadows.
- Elevation: Blur intensity (0+). Higher = softer shadows.
- Layers: Number of shadow layers (3–8). More = smoother, more realistic.
- Color: Choose color and adjust opacity (brightness) as percentage.
- Apply Button: Click to apply. Generates multiple shadow layers automatically.
Form Mode
Precise numerical control for matching existing designs or achieving specific shadow values.
- Type: "Drop shadow" (external) or "Inner shadow" (internal).
- Position: X and Y offset values. Positive Y moves shadow down.
- Blur: Blur radius (0+). Higher values = softer shadows.
- Spread: Expand or contract shadow. Positive = larger.
- Color: Choose color and adjust opacity (0–100%).
- Live Updates: Changes apply immediately as you adjust values.