ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
Shadows make a flat graphic feel spatial: a shadow behind an object can suggest that it floats above a surface, while one inside its edge can make it appear recessed. Use either effect when it clarifies depth, hierarchy, or interaction—not as automatic decoration. There is no universal setting for offset, blur, or opacity; the right treatment depends on the object and the composition around it.
What a shadow tells the viewer
A graphic shadow is a visual cue, not just a dark shape. Its position and softness help viewers infer how an object relates to its background, nearby elements, or an imagined light source. Figma’s guidance describes drop shadows as a way to create distance between objects, suggest light direction, emphasize an object, and imply three-dimensional form (Figma: Apply effects to layers).
Before adding one, decide what relationship the shadow should communicate. Is the object lifted, pressed into a surface, or simply more prominent than surrounding content? If the answer is unclear, the effect may add visual noise without making the composition easier to read.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
Choose between a drop shadow and an inner shadow
| Effect | Where it appears | What it suggests | Common use |
|---|---|---|---|
| Drop shadow | Behind and outside the object | Separation from a surface or other content; elevation or emphasis | A floating card, menu, tooltip, or other element that needs to stand apart |
| Inner shadow | Within the object’s bounds | Recessed or indented depth | A pressed or active button appearance |
These effects describe different spatial relationships, so they are not interchangeable. Figma documents drop shadows as effects behind the selected object and inner shadows as effects contained within it (Figma: Apply effects to layers; Figma: Apply effects to layers).
How shadow settings change the cue
Treat settings as design variables to adjust in context, not as a recipe to copy. The same numerical values can look quite different depending on the shape, background, and surrounding artwork.
- Offset (X and Y): Moves the shadow horizontally and vertically. The displacement helps imply the direction of the light source and the distance between the object and the surface.
- Blur: Softens the shadow’s edge. More blur blends it into the background; less blur creates a sharper, higher-contrast boundary. A crisp shadow is not automatically wrong, and a soft one is not automatically better.
- Opacity and color: Set the shadow’s visible strength and appearance. Judge them against the background and the object’s edge, rather than choosing darkness in isolation.
- Spread: Changes the shadow’s size where the selected layer and application conditions support it. Figma notes that spread is not available in the same way for every object.
- Mode and darkness: Illustrator provides these application-specific controls alongside opacity, color, offset, and blur.
Figma describes the offset, blur, fill, opacity, and conditional spread controls in its effects guide (Figma: Apply effects to layers). Illustrator’s dialog provides its own related controls (Adobe: Create drop shadows in Illustrator). Neither set of controls establishes a universally correct blur, opacity, offset, or spread value.
Use shadows to establish hierarchy and interaction
A shadow can tell viewers which content sits above other content or deserves more attention. Adobe Spectrum uses drop shadows for emphasized containers, hover states, and elevated elements such as menus and tooltips (Adobe Spectrum: Drop shadow).
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #3
Apply that logic selectively: reserve stronger or more noticeable treatment for elements whose prominence has a purpose. If every object casts a shadow, the effect stops distinguishing levels of importance. For interactive designs, keep the shadow tied to the state it represents so viewers can understand why an element appears elevated or emphasized.
Apply shadows in Figma
- Select a layer, group, frame, or component.
- In the Effects controls, add a drop shadow or choose an inner shadow.
- Adjust the available offset, fill or color, blur, and spread controls while viewing the result in the composition.
- If you need consistent treatment across a project, save and reuse an effect style. Check spread availability for the selected object and its frame or component conditions.
Figma documents both its effect controls and reusable effect styles (Figma: Apply effects to layers; Figma: Guide to styles in Figma).
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Apply a drop shadow in Adobe Illustrator
- Select an object, group, or layer.
- Choose Effect > Stylize > Drop Shadow.
- Adjust the dialog’s mode, opacity, X and Y offsets, blur, color, and darkness to suit the artwork.
- Review the result in its intended composition and output context; do not assume Illustrator’s rendering or controls behave identically to another application.
Illustrator simulates blur by creating a transparent raster object. Adobe’s help page describing this workflow was last updated 11 February 2026 (Adobe: Create drop shadows in Illustrator).
Quick Recap
Keep the treatment clear and restrained
- Give each shadow a job. Use it to clarify separation, elevation, emphasis, or recessed depth. Remove it if it does none of those things.
- Avoid defaulting to true black. Figma’s design-system lesson warns that true-black shadows can look muddy and dull (Figma: Lesson 2: Define your design system).
- Choose edge softness for the intended look. Blur is adjustable; a hard edge can be deliberate, while a soft edge can blend more subtly.
- Check consistency. Reusable effect styles in Figma can help keep repeated treatments aligned. Consistency should support the composition, not make every object look equally elevated.
- Inspect the finished composition. Assess the shadow against its actual background and neighboring content, not in isolation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
