How to Create a Long Shadow in After Effects

A workflow taught by Adobe Certified Instructors at Adobe Video World.

The long shadow is a popular flat-design effect — a single, sharp diagonal shadow that gives icons, text, and logos a clean sense of depth. It’s everywhere in modern motion graphics and app design. After Effects creates it several ways. This guide covers the techniques for building long shadows and animating them for stylish, flat-design visuals.

What a Long Shadow Is

A long shadow is a flat, solid shadow that extends from an element at a 45-degree angle, usually fading or cut off at a distance. Unlike a soft drop shadow, it’s a crisp, stylized shape that adds depth in a clean, graphic way.

The effect became iconic in flat design, appearing on icons, text, and logos across apps and motion graphics. It gives elements a modern sense of dimension without the realism of a soft shadow, which is exactly its appeal.

How the Effect Works

A long shadow is essentially many copies of the element, each offset slightly in the shadow’s direction, stacked to form a continuous solid shape. This trail of offset copies creates the long, diagonal shadow extending from the element.

Understanding this principle — repeated, offset duplicates building a solid shadow — is the key to every method of creating it. Whether done manually or with an expression, the underlying idea is the same stacked-copies approach.

Build It by Duplicating Layers

The manual method duplicates your element many times, offsetting each copy a pixel or two diagonally, then colors them as the shadow. Stacking dozens of these offset copies behind the original builds the solid long shadow shape.

While effective, doing this by hand is tedious for a smooth shadow. It works for understanding the effect, but most artists use a faster, expression-driven or scripted method to generate the many copies automatically.

Use an Expression or Script

A faster approach uses an expression or a script to generate the offset copies automatically. Expressions can create the repeated, stepped duplicates that form the shadow, and free scripts exist specifically for one-click long shadows.

These methods produce a smooth shadow without manually duplicating layers. Learning an expression-based or scripted approach makes long shadows quick to create and easy to adjust, which is how most motion designers build them in practice.

Use the CC Repetile or Echo Trick

Certain effects can fake a long shadow quickly. Applying a directional effect that repeats the layer, or using a stylized echo on a colored duplicate, can produce a long-shadow-like trail with less manual work.

These shortcuts vary in quality but offer fast alternatives for simple cases. Experimenting with effects that repeat or smear a layer diagonally can get you a serviceable long shadow when you don’t need pixel-perfect control.

Color and Style the Shadow

The shadow’s color and opacity define the look. A flat long shadow is often a darker or desaturated version of the background color, sometimes semi-transparent, fading toward its end for a softer finish.

Styling the shadow to complement your design — matching the flat aesthetic with the right color and a possible gradient fade — completes the effect. The clean, considered color is part of what makes a long shadow look professional rather than heavy.

Animate the Long Shadow

Long shadows can animate for dynamic reveals. Animating the shadow’s length growing as it appears, or its angle shifting as if a light moves, adds motion that draws attention while keeping the clean flat-design feel.

These animations, eased smoothly, make a long-shadow element feel alive. A shadow stretching out as an icon lands, or sweeping as light changes, adds polish to the effect within the broader techniques of our motion graphics guide.

Long Shadow Best Practices

• Build the shadow from many offset, stacked copies.
• Use an expression or script to generate copies fast.
• Color it as a darker, often semi-transparent shade.
• Animate the length or angle for dynamic reveals.

Common Long Shadow Mistakes

• Too few copies, leaving a gappy, stepped shadow.
• A shadow color too heavy for the flat aesthetic.
• Inconsistent angle that breaks the clean look.
• Doing it all by hand when a script is far faster.

A Real Long Shadow Example

Picture designing a flat-style icon set for an app promo. For each icon you generate a long shadow with a script, casting a crisp 45-degree shade in a darker tone of the background, fading gently toward its end. The icons immediately gain a clean, modern sense of depth without any of the realism of a soft drop shadow.

Then you animate each shadow stretching out as its icon pops onto the screen, so the depth appears with the element. The result is a cohesive, polished flat-design sequence — a perfect demonstration of how the long shadow, used consistently and animated simply, gives a whole set of graphics a unified, contemporary look.

Long Shadows in Flat Design Systems

The long shadow is part of a broader flat-design language, so it works best when it matches the rest of your visual system. Using a consistent shadow angle, a harmonious color, and the same fade across every element keeps a set of graphics feeling unified rather than like a collection of separate effects.

It pairs naturally with bold flat colors, simple geometric shapes, and clean typography. Thinking of the long shadow as one component of a cohesive design language, alongside the broader skills in our motion graphics guide, is what makes it read as intentional, modern design rather than a dated gimmick.

Keep Long Shadows Subtle

Because a long shadow is a bold graphic element, restraint keeps it tasteful. A shadow that’s too dark, too long, or too opaque can overwhelm the element it’s meant to support, so a semi-transparent tone that fades out usually looks more refined than a heavy, solid slab of shade.

Matching the shadow’s strength to the weight of your design ensures it adds depth without dominating. Like a vignette or any finishing touch, the long shadow works best when it’s felt rather than shouted, quietly giving flat elements dimension while keeping the focus on the content itself.

Once you’ve added a flat long shadow, layer styles in After Effects let you stack bevels, glows, and strokes on the same text.

A flat shadow plus using Colorama to tint in After Effects makes for striking, graphic title cards.

Key Takeaways

• A long shadow is a flat, diagonal shadow for flat design.
• It’s built from many offset, stacked copies of the element.
• Use an expression or script to generate it quickly.
• Color it cleanly and animate the length or angle.

Frequently Asked Questions

How do I create a long shadow in After Effects?

A long shadow is built from many copies of your element, each offset slightly diagonally and colored as the shadow, stacked to form a solid trail. Use an expression or a free script to generate the copies quickly.

What is the long shadow effect?

It’s a flat-design effect — a crisp, solid shadow extending diagonally from an element, usually at 45 degrees. Unlike a soft drop shadow, it’s a stylized graphic shape that adds clean depth to icons, text, and logos.

What’s the fastest way to make a long shadow?

Use an expression-driven method or a dedicated free script that generates the stacked offset copies automatically, rather than duplicating layers by hand. This produces a smooth shadow that’s quick to create and adjust.

Sources: Wikipedia’s overview of flat design.