# Skill: Implement iOS-style liquid glass UI elements with correct layering

> Lets an AI coding/design agent build translucent frosted-glass buttons, panels, and cards that match the iOS 26 liquid glass aesthetic -- applies when a user requests glassy, translucent, or Apple-like UI components.

Source: sodigi·learn -- vibecoding/steklyannye-knopki · https://sodigi.io/learn/vibecoding/steklyannye-knopki

## When to use
- User asks for glass, frosted, translucent, or liquid-glass buttons or panels.
- User wants an "Apple-like" or "iOS-style" interface feel.
- User is building a hero section, floating nav bar, or modal overlay where background content should show through.
- User asks why their glass effect "looks murky" or "has no effect" on a white background.

## Core rules
- Glass requires four ingredients applied together: (1) **background blur** (backdrop-filter), (2) **transparency** (low opacity fill or rgba), (3) **edge highlight** (thin bright border or box-shadow along the rim), (4) **tap/hover reaction** (brightness or light-play on interaction). Without all four, the result looks flat or invisible.
- Glass is only visible over a **live background** -- a photo, gradient, or video. On a plain white or solid-color block, there is nothing to blur and the effect disappears entirely.
- Multiple glass buttons placed side by side must share **one container**. This makes edges merge cleanly and is significantly faster to render than individual overlapping panes.
- Apply tap/hover reactions only to interactive elements (buttons, toggles). Decorative glass cards do not need interaction states.
- Always check **text contrast** in both light and dark themes. If text blends into the blurred background, add a text-shadow or increase the fill opacity for that element.
- Do not make every element on the page glassy -- glass is for buttons, floating panels, modals, and cards, not for every block and every heading.

## Procedure
1. Confirm a live background exists (or add one -- a gradient or hero image works well).
2. Build the base button/panel shape with the desired border-radius.
3. Apply `backdrop-filter: blur(Xpx)` and `background: rgba(R,G,B,0.1--0.2)` for the core frosted effect.
4. Add the edge highlight: `border: 1px solid rgba(255,255,255,0.25)` or an equivalent box-shadow along the top/left rim.
5. Add hover/active states using `filter: brightness(1.1)` or a subtle light animation -- only on clickable elements.
6. If placing several glass buttons in a row (e.g., a tab bar or bottom nav), wrap them in one shared container with a single backdrop-filter applied to it.
7. For a primary/accent button, add a faint brand tint: `background: rgba(brand-hue, 0.15--0.25)`.
8. Verify readability by testing against multiple background states (bright photo, dark area, low contrast spot).

## Ready-to-use prompt
```
Add liquid-glass-style buttons to the page (iOS 26 aesthetic). Requirements:

1. Buttons sit over a live background (photo or vivid gradient) so there is
   something to blur through the glass. Add a background if the page lacks one.
2. Glass recipe per element: backdrop-filter blur, slight transparency (rgba fill),
   bright edge highlight, corner radius 16px.
3. The primary CTA button gets a faint tint in the brand color to distinguish it
   from secondary buttons.
4. Group any buttons that sit side by side (bottom nav, tab bar) inside one shared
   container so edges merge cleanly and rendering stays fast.
5. Check text contrast in both light and dark themes -- add contrast where text
   risks blending into the blurred background.
```

## Pitfalls
- Placing glass on a white or solid-color background -- the effect is completely invisible with nothing behind it to blur.
- Making every block on the page glassy -- overuse kills readability and the "premium" feel.
- Omitting the edge highlight -- without a rim reflection the glass looks flat and cheap.
- Creating five separate backdrop-filter elements instead of one shared container -- causes visible lag and visual mess on adjacent panes.
- Forgetting to check text readability -- attractive glass with unreadable labels is a broken button.
- Setting an opaque background-color directly behind the glass element -- it cancels the show-through effect.