How to Create a Viral Shadow Effect in Figma (Step-by-Step Tutorial)

Original carousel by @averlo.co on Instagram. Breaking down what separates a forgettable shadow from one that makes people stop scrolling.

The Problem With Most Figma Shadows

Shadow effects are one of the most abused tools in UI design. Open any Figma file and you will find drop shadows slapped on every card, button, and modal with the same default settings: a 4px blur, 10% opacity, straight black. The result is what @averlo.co calls out in their carousel: shadows that look cheap, get low views, and make zero impact.

The problem is not that designers are lazy. The problem is that Figma makes it incredibly easy to add a shadow without thinking about why you need one. The drop shadow dialog has six fields and most people only touch two of them. That leaves four levers untouched that separate amateur work from professional output.

What a High-Impact Shadow Actually Does

A good shadow does three things simultaneously: it communicates depth, it establishes a light source, and it guides the viewer to the most important element on the screen. A bad shadow does none of these. It just adds a gray smudge under a rectangle.

Here is what separates the two approaches:

1. Color matters more than opacity. Default black shadows at 10% opacity flatten an interface. They make everything look like it sits on the same gray plane. Professional designers tint their shadows with the brand color or a cool blue. A shadow with a subtle blue tint at 8% opacity reads as more natural than a pure black shadow at 20%.

2. Layer your shadows. A single shadow is a guess. Two or three stacked shadows at different blur radii and offsets simulate how light actually behaves. Start with a tight shadow (small blur, small offset) for contact, then add a softer shadow (large blur, larger offset) for ambient depth. This is the technique that makes floating cards and modal sheets feel like they exist in physical space.

3. Match the blur to the elevation. A card 1px off the surface should have a 2-4px blur. A modal floating above everything should have a 20-40px blur. If your blur values are all the same regardless of elevation, your depth hierarchy is broken.

4. Offset tells a story. A 0x4px offset says the light is directly above. A 2x6px offset says the light is upper-left. Pick one direction and commit to it across every shadow in the design. Inconsistent offsets make the interface feel like it was assembled from spare parts.

The Result: Shadows That Stop the Scroll

When you apply these principles together, the difference is immediate. The element you want users to focus on lifts off the page. The supporting elements settle into their correct depth. The whole interface gains a tactile quality that screenshots well, shares well, and earns the engagement that flat default shadows never will.

Practical Steps in Figma

1. Select your element and open the Drop Shadow effect.
2. Change the color from black to a tinted dark tone (try a deep navy or your brand color at low opacity).
3. Set your first shadow layer: X=0, Y=2, Blur=4, Spread=0, Opacity=12%. This is your contact shadow.
4. Click the plus icon to add a second shadow layer: X=0, Y=8, Blur=24, Spread=0, Opacity=6%. This is your ambient shadow.
5. For floating modals, add a third layer: X=0, Y=16, Blur=48, Spread=0, Opacity=4%.
6. Save these as a Figma style so every card in your system uses the same shadow treatment.

The goal is consistency. When every elevated surface in your design uses the same shadow language, the interface feels intentional. When each shadow is a one-off, the interface feels accidental.

Why This Matters Beyond Aesthetics

Shadows are a hierarchy tool, not a decoration. They tell users what is interactive, what is foregrounded, and what is background. A well-placed shadow on a CTA button increases tap rates. A well-placed shadow on a pricing card draws the eye to the plan you want users to choose. The viral shadow effect is not about making things look pretty. It is about directing attention with precision.

If you are building design systems or shipping product UI, the same principle applies to your components. Build shadow tokens into your design system in Figma and use them consistently across every surface. Your users will feel the difference even if they cannot articulate why.

Want to ship UI that feels this polished without hand-coding every shadow? Start building with Base44 and generate production-ready interfaces with proper depth hierarchy built in.

---

Original carousel by @averlo.co. See the original Instagram post for the full visual walkthrough.