Liquid glass in Figma and design tools

In short: Figma's native Glass effect where the tool has one (A), otherwise the manual layer stack (B); annotate every glass layer for handoff (C).

Limits: only a native Glass effect (Figma) bends what lies beneath the shape; tools without one and image generators need the manual stack (B) or a painted bend, or they show frost only. A still frame cannot show press, morph or a travelling beam: annotate them for handoff.

A. Figma native Glass effect

Apply the Glass effect to the shape (not to a frame containing content), then:

Put labels and icons in a sibling layer above the glass shape so they are not refracted. Corner smoothing 60 %. Add the edge line as a 1 px outside stroke on the glass shape: black 12 % (dark theme 32 %). The frame or component that contains the glass shape must have no fill: the Glass effect refracts whatever is beneath it, and a filled component frame (or a card behind it) leaves it nothing but that flat colour. Add the ambient drop shadow (0 8 28 black 14 %) on the glass shape.

Depth = bezel in px (from the design language tables): 28 px bezel panel → Depth 28; 44 px tall capsule button → Depth 22; 64 px tab bar (bezel 22) → Depth 22; 40 px avatar → Depth 20. Refraction and Frost are Figma's own 0–100 scales — use the table above, not the px displacement/blur numbers. If the built-in light draws a uniform ring on a wide capsule, lower its intensity and add the two offset inner shadows from the manual stack (steps 6–7).

B. Manual layer stack (tools without a glass effect)

Build each glass body as a group, bottom to top:

1. Shadow: drop shadow x0 y8 blur28 black 14 % + x0 y1 blur3 black 8 %.
2. Refraction copy: duplicate the backdrop region under the shape, mask it to the shape, scale it 106–110 % from the shape centre (convex/lens) — this magnification is what separates glass from a blurred rectangle.
3. Edge band: a second masked copy restricted to an inner ring as wide as the bezel (shape minus shape inset by the bezel), scaled 115–125 %, blurred 1–2 px. It makes the backdrop bend at the rim.
4. Background blur on the shape: lens 1–2, regular 4–8, frost 18–28 (tool units); the top of each range over busy content.
5. Fill: white 12–18 % (light) or #12121A 30 % (dark); frost 24–34 % / 40 %.
6. Rim (follows the shape, so a wide capsule is lit along its whole top edge): inner shadow x1.5 y1.5 blur0 spread−0.5 white 96 % (key light), inner shadow x−1.5 y−1.5 blur0 spread−0.5 white 56 % (counter-light), plus a 0.5 px inside stroke white 24 % for the flanks. Dark theme: 68 % / 35 % / 14 %. Do not use a 135° gradient stroke — it lights only the left end of wide shapes.
7. Edge line: 1 px outside stroke, black 12 % (dark theme 32 %).
8. Inner glow: inner shadow x2 y3 blur8 spread−4 white 80 % (key) and x−2 y−3 blur8 spread−4 white 35 % (counter).
9. Content above the group: flat, no effects.

Keep the backdrop image behind every mockup: glass mockups on a white artboard are meaningless. Use a detailed photo/wallpaper for presentation and a grid for checking the bend.

C. Handoff notes for developers

Annotate each glass layer with: material, profile, corner radius, bezel, displacement, blur, fill, rim opacities, shadow. Mark which elements are flat children. These map directly to the web/SwiftUI/Flutter parameters.

D. Image generation / moodboard prompts

Describe the optics, not the word "glassmorphism":

> "liquid glass UI, thick clear rounded glass capsule floating over a detailed photo, the background visibly bent and > magnified at the rounded edges, calm clear centre, thin bright rim light from the top-left and a dimmer rim at the > bottom-right, soft ambient shadow, crisp flat dark label on top, iOS 26 style"

Negative: "frosted cardboard, heavy white fill, uniform white border, neon glow, bevel, emboss, rainbow fill, blurred text, glass on plain white background".

E. Liquid metal accent (not glass)

For the one metal element in a view: a logo or app icon, the rim of a hero action, the ring of a selected item.

• Paper: fill the shape with the Liquid Metal shader, or upload the logo as a transparent image. Settings: repetition 2, softness 0.1, shiftRed / shiftBlue 0.3 (0 = no fringe), distortion 0.05–0.1, contour 0.4, angle 70. For a rim, apply it to a ring shape: the outer shape minus the same shape inset by 2–4 px.
• Figma and tools without a shader: inside stroke 2–4 px with an angular gradient of hard stops #14151A 0–7 %, #F7F8FC 10–21 %, #8A8D96 30 %, #FFFFFF 43–47 %, #2A2B30 51–59 %, #D9DBE2 70 %, #14151A 81 %, #F7F8FC 92 %. Fringes: duplicate the stroke twice, tint the copies #FF3B30 and #2F7BFF, offset them +1 / −1 px, blend Screen, and mask them to short segments where a dark stop meets a light one. A filled icon uses the same stops as a linear gradient at 70° over a dark base, plus one soft white highlight shape near the top-left.
• Image prompt:

> "liquid chrome app icon, mirror-polished molten metal, a few broad soft studio reflections flowing across the > surface, thin red and blue chromatic fringes where dark reflections meet light ones, rounded square, dark background"

Negative: "brushed metal, gold, rust, bevel, emboss, glass, transparent, rainbow gradient fill, busy reflections".

F. Border beam (animated rim light)

For the one beamed element in a view (border-beam effect spec): the primary call to action, a featured card, a surface that is working. The beam sits above the static rim and never replaces it.

• Still frame: duplicate the glass shape's outline above the rim, give it a 1.5 px inside stroke with a linear gradient from the head colour to transparent (white on dark glass, accent #2B6BFF on light glass), and mask it to a 20–30 % stretch of the outline so the bright end sits where the head is. Under it, a copy with a 3 px stroke and a 4 px layer blur at 80 % is the bloom. Show one frame where the beam wraps a corner or cap: that is what reads as travelling light.
• Motion: in After Effects, Lottie or Rive, stroke the outline path and add Trim Paths with end = start + the tail (20–30 %), then animate the offset through one full turn, linear, over the lap (4–6 s buttons, 6–10 s cards, 2–3 s for a working state). This is exact and keeps one speed on any shape. Figma prototypes cannot trim a path; the common workaround (a large angular-gradient rectangle masked to a ring and spun with Smart Animate) is angle-driven, so it is acceptable on near-square cards only: on a wide capsule the beam crawls along the long edges and races, stretched, round the caps.
• Handoff: width, tail %, lap, head and tail colours, bloom blur and opacity, single or twin (half a lap apart), and off under reduced motion.
• Image prompt (still): add "a thin bright beam of light travelling along the glass rim, bright head with a fading tail wrapping one rounded end" to the glass prompt of section D. Negative: "neon outline, glowing ring all the way round, rainbow border, thick stroke".

<!-- medium: web -->