# Liquid glass in Figma: Glass effect settings that match iOS

Source: https://meniscus.site/liquid-glass/figma · Updated 2026-10-01

Figma's native Glass effect bends what lies beneath a shape; tools without one need a manual layer stack, and image generators need the bend painted in. The settings decide whether a mockup reads as Apple's material or as a blurred card.

This is the design-tool recipe the Meniscus MCP server gives design agents: Glass effect settings, the manual stack, handoff notes and image-generation prompts.

Ask your assistant (with Meniscus connected): "Design a dark wallet screen with glass cards and a glass tab bar in Figma, and give me the layer settings for each glass body. Use the meniscus 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:

| Setting | Lens (small control) | Regular (bar, input, card) | Frost (dialog, sheet) |
|---------|----------------------|----------------------------|-----------------------|
| Light angle | −45° (top-left) | −45° | −45° |
| Light intensity | 75–85 % | 65–75 % | 55–65 % |
| Refraction | 70–90 | 50–70 | 40–60 |
| Depth | ≈ half the height | 20–24 | 24–28 |
| Dispersion | 0–10 | 0–5 | 0 |
| Frost | 0–2 | 3–8 | 12–24 |

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 -->

## Questions

**Does Figma have a liquid glass effect?** Yes, the native Glass effect. It bends what lies beneath the shape; set refraction, depth and frost per component as below rather than one preset everywhere.

**How do I hand liquid glass off to developers?** Annotate every glass layer with its material, radius, bezel, displacement and blur, and note press, morph and motion that a still frame cannot show. Section C lists what to write.