The Viral Shadow Effect in Figma: How Depth Makes Your UI Go Viral

Original carousel by @averlo.co on Instagram. See the original post here.

---

Most UI designs get scrolled past. A few stop the thumb. The difference often comes down to one thing: depth. A well-crafted shadow effect can take a flat, forgettable interface and make it feel tangible, premium, and worth engaging with.

This breakdown from @averlo.co shows exactly how the right shadow effect in Figma transforms a design from low-impact to high-impact. The comparison is stark, and the technique is simpler than you think.

The Problem: Flat Shadows, Flat Engagement

The left side of the comparison shows what most designers do. A subtle, barely-there shadow that technically exists but communicates nothing. The result is a card that looks like it belongs to the background, not above it. Users scroll past because nothing in the visual hierarchy demands attention.

The right side shows the same card with a properly tuned shadow. The depth is visible. The card lifts off the page. The eye is drawn to it immediately. This is not about making things look flashy. It is about using depth as a hierarchy tool that tells the user where to look.

The Anatomy of a Viral Shadow

A great shadow is not a single drop shadow with default settings. It is a composition of multiple shadow layers, each serving a specific purpose. Here is the breakdown:

Layer 1: The Contact Shadow This is a tight, dark shadow with low blur and minimal offset. It sits directly beneath the element and creates the impression that the object is physically touching the surface below. Think of it as the shadow you would see if you held a card a millimeter above a table.

• X: 0px
• Y: 1px
• Blur: 2px
• Spread: 0px
• Opacity: 20 to 30 percent

Layer 2: The Elevation Shadow This is the wider, softer shadow that creates the sense of height. It has a larger blur and a slightly bigger Y offset. This shadow communicates how far the element is floating above the background.

• X: 0px
• Y: 4px
• Blur: 12px
• Spread: 0px
• Opacity: 10 to 15 percent

Layer 3: The Ambient Shadow (Optional) For elements that need to feel like they are floating significantly above the surface, add a third layer with an even larger blur and offset. This creates a subtle, diffuse shadow that simulates ambient light scattering.

• X: 0px
• Y: 8px
• Blur: 24px
• Spread: 0px
• Opacity: 5 to 8 percent

Setting It Up in Figma

In Figma, you can stack multiple shadows on a single element. Here is how:

1. Select your element (card, button, modal)
2. In the right panel, click the Effects section and add a Drop Shadow
3. Configure Layer 1 (Contact Shadow) with the settings above
4. Click the plus icon next to the shadow effect to add a second Drop Shadow
5. Configure Layer 2 (Elevation Shadow)
6. Optionally add Layer 3 for deeper elevation

The key insight: Figma renders multiple shadows in the order you add them. The first shadow in the list renders on top. Stack them so the contact shadow is first and the ambient shadow is last.

Color Matters: Stop Using Black

One of the biggest shadow mistakes is using pure black (#000000) at a low opacity. Pure black shadows look unnatural because real-world shadows are rarely pure black. They take on the color of the ambient light and the surface below.

Instead, use a shadow color that matches your background tone. On a light gray background, use a dark gray or blue-gray shadow. On a warm background, use a warm brown shadow. This subtle shift makes the depth feel natural instead of digital.

A popular approach: use the same hue as your background color but at 10 to 20 percent saturation and very low lightness. This creates shadows that feel like they belong to the design, not pasted on top of it.

Elevation as Hierarchy

The real power of the viral shadow effect is not aesthetics. It is communication. Each shadow level tells the user something about the interface:

• No shadow: Background elements, flat content, things that are part of the page
• Contact shadow only: Slightly raised elements, subtle interaction hints
• Contact plus elevation: Cards, panels, floating content that demands attention
• Full three-layer shadow: Modals, popovers, critical actions that need to feel urgent

When you use shadow consistently as a hierarchy tool, users navigate your interface faster. They know what is clickable because it has depth. They know what is important because it floats higher. The shadow is doing the work of telling them where to look and what to do.

The Viral Element: Why This Specific Effect Works

The reason this shadow effect goes viral is that it solves a problem every designer has. Most designs look flat. Most designs get ignored. The gap between a design that gets scrolled past and one that gets shared is often just the depth.

When you apply this technique, the before and after is dramatic enough that people screenshot it, save it, and share it. That is the viral mechanism. It is not about a clever animation or a trendy color. It is about a fundamental visual principle executed well.

Common Shadow Mistakes

Using one shadow for everything. If your buttons, cards, and modals all have the same shadow, you have no hierarchy. Differentiate elevation levels with different shadow configurations.

Cranking the opacity too high. A shadow at 50 percent opacity looks like a black box, not depth. Keep your contact shadow at 20 to 30 percent and your elevation shadows at 10 to 15 percent.

Forgetting the Y offset. A shadow with 0px Y offset looks like a glow, not a shadow. Light comes from above in most interfaces, so your shadow should always have a positive Y value.

Put It Into Practice

The viral shadow effect is one of those techniques that takes five minutes to learn and transforms every design you make afterward. Open Figma, pick a card in your latest design, and apply the three-layer system. The difference will be immediate.

If you want to build real interfaces with proper depth systems and component libraries, Base44 lets you ship production apps with AI. Your shadow system becomes part of the component architecture, not a manual effect on every element.

---

Original carousel by @averlo.co on Instagram. View the original post here.