DOCS/Effects

Drop Shadow

Shadow & Glow

Cast a shadow underneath the layer.

Drop Shadow copies the layer's silhouette, blurs it, tints it, and draws it behind at an offset. It is the oldest trick in the book and still the fastest way to lift something off a background.

The shadow follows the silhouette, not the bounding box. Text casts a shadow shaped like the letters; a shape with a hole casts a shadow with a hole.

What it looks like

Before

Drop Shadow

Same artwork either side, so the difference you see is the effect. Built with the same SVG-filter primitives the product uses, but tuned for legibility at this size — treat it as a faithful illustration of the behaviour rather than a pixel-exact capture of the editor.

When to reach for it#

Separating a subject from a busy background.
Giving UI cards and panels a sense of height.
Adding weight to text so it survives over an image.

How it works#

Angle and Distance decide where the shadow lands. Think of them as one polar coordinate, not two independent settings — a low distance makes the angle almost irrelevant, and a large distance makes it the dominant control.

Blur softens the edge. The relationship between distance and blur is what reads as height: a small distance with a tight blur sits close to the surface, a large distance with a wide soft blur floats well above it. Getting that pair wrong is what makes a shadow look pasted on.

Parameters#

Angleangle#

Direction the shadow falls, in degrees. Pick one angle and use it on every layer in the composition — inconsistent light direction is the single most obvious tell of an amateur composite.

Distancedistance#

How far the shadow is offset. Read it together with Blur: distance without blur is a hard duplicate, distance with generous blur is height.

Blurblur#

Edge softness in pixels. Real shadows get softer the further they are from the object, so raise this alongside Distance rather than independently.

Colourcolor#

Defaults to black, which is almost always wrong. Real shadows take colour from the surface and the ambient light — a dark version of the background colour reads far better than pure black.

Opacityopacity#

How dark the shadow is. Above about 60% it starts to read as a second object rather than an absence of light.

Spreadspread#

Grows the silhouette before blurring, making the shadow denser and larger without moving it. Small values only — a large spread produces a solid slab.

Recipes#

Text that stays readable over any photo

Add Drop Shadow with Distance 0.
Blur around 18, Opacity around 45%.
Set the colour to a very dark version of the photo's dominant hue rather than black.

Distance 0 makes it a halo rather than a shadow, which works from any background without implying a light direction that fights the photo.

Things that catch people out#

Pure black rarely looks right

Black shadows read as holes. Tint toward the background colour and the layer sits in the scene instead of on top of it.

It shadows the finished layer

A repeated or instanced layer gets one shadow around the whole array, not one per copy — the copies were made before the effect ran.