Effects
Six drop shadows, four backdrop blurs and three liquid glass styles. The shadow ramp is the part that reaches the code, and every surface that lifts is bound to one of its steps.
Preview
Thirteen effect styles in the file: six drop shadows, four backdrop blurs, three liquid glass. The six shadows are the ramp, and they are the part that reaches the code. Here they are in order on one surface, so the ladder is a single glance instead of six comparisons.
Every step is two layers and both are pure black. Nothing in the ramp carries a hue, and nothing carries a second value for dark mode. The hairline on each tile is docs chrome: at 4 percent, a white surface on a white stage is otherwise indistinguishable from the stage.
Elevation
Six steps, and the file names what each one is for. Read the description before the numbers. The step is chosen by what the surface is, never by how deep the shadow happens to look.
0 4 4 spread 0, 1%
0 3 5 spread -2, 5%
0 4 6 spread -4, 8%
0 5 6 spread -5, 5%
0 6 10 spread -5, 10%
0 8 10 spread -6, 12%
Switch this page to dark and the ladder above all but collapses. That is not a fault in the page. A 5 percent black shadow has almost nothing to say against a #0E0E0F surface, and the ramp ships one set of values for both modes, in the file and here. The Card page already answers this with a deliberate dark override at 30 and 14 percent, and until the file gives the ramp a dark value, any component that has to read as lifted on a dark surface needs the same kind of local decision.
Blur
Four backdrop blurs: 8, 16, 24 and 40. A blur needs something behind it, so a radius only means anything against a real ground. These four are documented, not drawn.
The shared stylesheet declares the shadow ramp and deliberately declares none of these. A Figma blur radius is not a CSS blur() radius, and the two have never been measured against each other. So the four radii are documented as Figma values, and nothing here converts them. Read them as a sequence, not as a conversion.
Liquid glass
Three styles, min, mid and max, and one number separates them: refraction 0, 15 and 100. In Figma this is a GLASS effect, which bends what sits behind it as well as blurring it.
CSS has no refraction, so there is nothing on the web for min, mid and max to differ by. The table below marks all three as having no equivalent, and that is the honest result. Use liquidGlass in the file, reach for the platform's own glass material in code, and treat the token as a Figma instruction rather than a web spec.
Tokens
Thirteen effect styles. Shadow offsets read x y blur spread in px, and every shadow layer is pure black at the stated alpha.
0 4 4 spread 0, 1%
0 3 5 spread -2, 5%
0 4 6 spread -4, 8%
0 5 6 spread -5, 5%
0 6 10 spread -5, 10%
0 8 10 spread -6, 12%
The six shadows are declared once for the whole docs site as --ap-shadow-xs through --ap-shadow-2xl, and every specimen on this page reads those variables instead of repeating the numbers. In the file, dropShadow/xs is style key S:73890325a32ce0113f288ae81d4e943f0cb39f93, bound by effectStyleId on Accordion, all three Card sets and Segmented Control. The blurs and the glass are declared in no stylesheet at all, on purpose.