Figma shadows & blurs styles template

A shadow is a claim about distance. It says this thing is floating above the page, so read it first and expect it to go away.

Dropdown menus, popovers, toasts, sticky headers, and dialogs all make that claim, and if every card on the page makes it too then none of them do. Elevation only works while it stays scarce.

A shadow scale that encodes distance

The scale runs shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl and shadow-3xl, and the step you pick is a statement about how far off the page something sits. Resting surfaces take xs or sm, barely more than a hairline that separates a card from its background.

Menus and popovers take md or lg, since they are temporary and need to look temporary. The heaviest steps belong to things that take over the screen, like a modal dialog. Keeping the whole range in one place stops the usual drift, where a dropdown menu ends up with a softer shadow than the button that opened it because two people eyeballed the blur radius on different days.

Focus rings live here, awkwardly

A focus ring is technically an effect, which puts it in this file rather than with the components it decorates. There are two single-layer rings, focus-ring in brand-500 and focus-ring-error in red-500, for controls like checkboxes and toggles that carry no shadow.

The complication is that Figma allows only one effect style per layer, so anything that needs a ring and a shadow at once needs them baked together: focus-ring-shadow-xs, focus-ring-shadow-sm and focus-ring-error-shadow-xs exist for exactly that reason, with skeuomorphic versions for the button treatment. It is a workaround, and the file says so. Worth getting right, because WCAG's focus visible criterion requires the indicator to exist at all, and the stricter focus appearance criterion asks for the equivalent of a 2px perimeter at 3:1 contrast against the unfocused state.

Backdrop blurs, shown over something real

The blur styles are backdrop-blur-sm, md, lg and xl, and the file demonstrates each one twice, over a photograph, in a light panel and a dark panel. That presentation is the point: a blur has no appearance of its own, so a swatch on a white artboard tells you nothing.

Figma permits one blur per layer, and the two kinds behave differently. Layer blur softens the object itself.

Background blur softens whatever sits behind it, which is what you want for a navigation bar over a hero image or the scrim behind a dialog. One caution from the examples: blur on its own does not dim, so pair it with a semi-transparent fill, or busy artwork will keep competing with the panel on top of it.

Skeuomorphism you can switch off

Buttons in the kit carry subtle inner shadows on top of their focus ring and drop shadow, which is the quiet skeuomorphic revival that came back into product design over the last few years. Some brands want it, some want flat surfaces, and the documentation covers removing it rather than pretending the choice is settled. Shadow color is the related decision people forget: a black shadow at low opacity looks correct on white and turns into a smudge on a dark background, which is why the notes cover updating shadow effect colors when you move between modes.

The practical habit is to apply these as styles rather than typing blur radii into the effects panel. A pasted shadow is invisible to search, cannot be updated centrally, and will quietly disagree with the rest of the file within a month. Applied as a style, one edit reaches everything, and the values stay legible in Dev Mode alongside the color styles the shadows are tinted from.