Motion and depth: radius, elevation, layers and easing

The radius ladder

Radius should scale with the size of the element, not be applied uniformly. A 24px radius on a 32px chip turns it into a pill; the same radius on a 400px card reads as soft and modern. Five steps is enough:

For nested corners, the inner radius should be the outer radius minus the padding between them. A 24px card with 16px padding wants an 8px inner radius; using 24px on both makes the inner element look like it is bulging out of its parent.

The elevation ladder

Five levels, each pairing a shadow with a surface treatment and a border. On a light ground the shadow does the work; on a dark ground the surface lightness and hairline border do most of it, because a soft shadow on near-black is close to invisible.

Realistic shadows use two layers, not one: a short, darker contact shadow at low blur, and a wide, faint ambient shadow. A single large blurred shadow reads as a grey smudge. Shadows should also be tinted with the palette's darkest hue — here a deep burnt red rather than pure black — which keeps them from looking dirty on warm surfaces.

The 3D aesthetic

"3D" in a web context rarely means real geometry. It usually means a layer stack: a background gradient field, one or two offset blurred shapes, and a foreground panel with a translucent fill and a lit edge. Three rules keep this affordable. Budget no more than three moving layers per viewport. Keep backdrop-filter to a small number of elements, because blurring a large area is one of the more expensive things a browser can be asked to do. And always define a solid fallback fill so the design survives when the filter is unsupported or disabled.

Parallax, if used, should be subtle and bounded: a few percent of travel, driven by scroll position on transform only, and switched off entirely under reduced-motion preferences. A parallax layer that moves further than its own height creates the seasick effect people rightly complain about.

Duration bands and easing

Elements entering the screen should ease out (fast start, gentle stop); elements leaving should ease in and may be slightly faster, because nobody wants to wait for a dismissal. Distance and duration travel together: a 6px card lift belongs in the quick band, a full-screen panel in the deliberate one.

Reduced motion is part of the spec

Every animation ships with its fallback. Inside a prefers-reduced-motion: reduce block, transitions and animations are disabled and any scroll-reveal is set to its final visible state. What must not happen is a blanket removal of transform — transform is used for layout, centring and scaling, not only for motion, and stripping it breaks components that never animated in the first place. Disable durations, not capabilities.

Pros and cons

Pros. A shared elevation ladder means a dropdown never accidentally sits visually beneath a card. Duration bands remove the "does this feel right?" argument from code review. Reduced-motion coverage is complete because it is generated alongside the animation.

Cons. Ladders can encourage over-elevation — if every surface has a shadow, nothing looks raised. Glass effects in particular are a performance and contrast risk, and on low-end hardware a large blurred backdrop can cost more than the entire rest of the page. Test the depth layer on a mid-range device before shipping it, and be willing to replace a blur with a flat translucent fill.