# Liquid Glass UI Kit: Give Your App the iOS 26 Look This Weekend

> Liquid Glass is the see-through, light-bending material Apple introduced with iOS 26. Tab bars, buttons and sheets now float over your content like a sheet of glass. Apps that still use flat 2022-style bars look old next to the system apps. You can adopt the new look by hand with Apple's own APIs, and this page shows how, step by step.

- URL: https://www.agentskillpacks.com/products/ios-liquid-glass-ui-kit
- Product: iOS Liquid Glass UI Kit
- Price: $29 one-time (USD), instant download, lifetime v1 updates
- Updated: 2026-10-21
- Seller: ToolGenX (https://www.agentskillpacks.com)

## Quick answer

To get the Liquid Glass look, build your app with Xcode 26 so standard bars and controls update on their own. Then add the glassEffect modifier to custom views in SwiftUI, or UIGlassEffect in UIKit. On the web, use CSS backdrop-filter. Liquid Glass UI Kit packs these patterns into 5 Claude Code skills, for a one-time $29.

## What iOS Liquid Glass UI Kit is

iOS Liquid Glass UI Kit is a 5-skill Claude Code kit for the iOS 26 Liquid Glass look: SwiftUI, UIKit and WidgetKit glass patterns, morphing and container examples, an accessibility checklist, and a CSS backdrop-filter version for the web. The code ships as samples inside the skill files and README.

## Why does your app look outdated next to iOS 26?

Your app looks outdated because iOS 26 changed the whole visual language, and custom bars and cards built for iOS 17 do not change with it. Apple's system apps now use Liquid Glass: see-through controls that float over content and bend the light behind them. A flat, solid tab bar now stands out as old.

Here is why it is hard to fix fast:

- **Custom code does not update itself.** Apple's [Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass) guide says standard SwiftUI and UIKit parts pick up the new look when you rebuild. Your own custom views do not.
- **Old blur tricks look wrong.** A blur from the old material APIs gives frosted plastic, not glass. It is close enough to look like a mistake.
- **You still have older iOS users.** People on iOS 17 and iOS 18 cannot see Liquid Glass, so every glass view needs a fallback.
- **Your website no longer matches.** The marketing page and the web dashboard now look like a different product.

Plenty of people are stuck at this step. When I checked Search Console on October 20, 2026, this kit's page was the only product page on my site that got clicks, and it ranked around 8th for "liquid glass ui kit". People search for this exact help.

The new APIs are not hard. Knowing where to use them, and where not to, takes the time.

## How to adopt Liquid Glass in SwiftUI, UIKit and CSS by hand

You adopt Liquid Glass in three layers: rebuild so standard parts update, add glass to a few custom controls, then write a fallback for older iOS and the web. Here are the steps with Apple's real APIs.

### In your iOS app

1. **Rebuild with Xcode 26.** Build with the latest SDK and run on an iOS 26 device or simulator. Standard bars, sheets, popovers and controls take on Liquid Glass with no code changes, as Apple's adoption guide explains.
2. **Remove custom backgrounds from bars.** Apple asks you to drop custom backgrounds on tab bars, toolbars and split views. They sit on top of the glass and hide it. Let the system draw the background.
3. **Add glass to one custom control.** In SwiftUI, the [glassEffect modifier](<https://developer.apple.com/documentation/swiftui/view/glasseffect(_:in:)>) puts Liquid Glass behind a view. A modifier is a small instruction you chain onto a view to change how it looks. For example: `.glassEffect(.regular, in: .rect(cornerRadius: 16))`.
4. **Use the glass button style for buttons.** `.buttonStyle(.glass)` gives a button the Liquid Glass look without custom drawing.
5. **Tune it.** You can tint the glass with a color, `.regular.tint(.blue)`, and make it react to touch with `.interactive()`. Use the tint for meaning, like a main action, not for decoration.
6. **Group nearby glass.** When several glass shapes sit close together, wrap them in a GlassEffectContainer. It lets the shapes blend and morph into each other instead of fighting.
7. **In UIKit, use the glass effect class.** UIKit has [UIGlassEffect](https://developer.apple.com/documentation/uikit/uiglasseffect), which you place in a visual effect view much like the old blur effects.
8. **Use it sparingly.** Apple's guide warns against overusing glass on custom controls. Keep it for the most important controls, such as the main nav and the main action.
9. **Test the settings.** Turn on Reduce Transparency and Reduce Motion in Settings, then check every glass screen. The [Human Interface Guidelines on materials](https://developer.apple.com/design/human-interface-guidelines/materials) explain how glass should sit above content.
10. **Write a fallback for older iOS.** Wrap your glass code in an `if #available(iOS 26, *)` check, and give older versions a plain material background instead.

### On your website

11. **Make the background see-through.** Give the panel a light, partly transparent fill, such as white at 15 to 25 percent.
12. **Blur what is behind it.** The CSS [backdrop-filter property](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) blurs the content behind an element. A common start is `backdrop-filter: blur(16px) saturate(160%)`. Add the `-webkit-backdrop-filter` line too, for older Safari versions.
13. **Add a light edge.** A thin, partly white border and a soft inner shadow on the top edge read as glass catching light.
14. **Plan for no support.** Use an `@supports` check, so browsers without backdrop-filter get a solid fill and the text stays readable.

The CSS version will not bend light or animate like the real thing. For a marketing page or a dashboard it gets you close enough that the app and the site look like one product.

If you work with an AI coding assistant on this, I listed the skills I actually use in [the best Claude Code skills for indie developers](/blog/best-claude-code-skills-for-indie-developers). Our free [tools page](/tools) has a few more small helpers.

## Where to get Apple's own design files

This kit has no Figma files. If you design before you code, start with Apple's [Design Resources](https://developer.apple.com/design/resources/) page. It links Apple's official iOS and iPadOS UI kit for Figma and Sketch. When I checked on October 21, 2026, the current kit was for iOS 27.

Search results for this term mix four kinds of kit:

| Kind of kit                   | What you get                                               | Fits                               |
| ----------------------------- | ---------------------------------------------------------- | ---------------------------------- |
| Design files                  | Figma or Sketch screens and parts                          | Mockups before any code            |
| HTML and Tailwind kits        | Ready web components with a glass style                    | Websites only                      |
| Flutter packages              | Widgets that copy the look in Flutter                      | Cross-platform apps                |
| Claude Code skills (this kit) | SwiftUI, UIKit and CSS patterns your assistant writes from | Native iOS code plus a web version |

## The faster way: ready Liquid Glass patterns for Claude Code

The faster way is to give your AI assistant the iOS 26 patterns up front, so it writes real Liquid Glass code instead of guessing from old blur code. Liquid Glass UI Kit does that with 5 Claude Code skills. A skill is a saved set of instructions that Claude Code loads when a task matches it.

The main one, liquid-glass-design, holds the SwiftUI, UIKit and WidgetKit patterns from the steps above, plus the parts that are easy to miss: unions, morphing between glass shapes, scroll edge effects and the accented mode for widgets. The README adds a CSS version for the web, an accessibility checklist and a short list of where glass helps and where it hurts. The other four skills cover general UI rules, Tailwind and shadcn styling, design tokens and brand design.

To be plain about what is not in the box: there are no Figma files, no separate Swift file per style and no Xcode project. The ui-ux-pro-max skill describes a style generator, but the script and data it needs are missing from the current download, so I do not count it as a feature until it ships.

### How to use it, step by step

1. **Buy and download.** Polar or Gumroad sends the files right after payment.
2. **Install the skills.** Copy the five skill folders into `~/.claude/skills`, as the README shows. That is the folder Claude Code reads personal skills from, as Anthropic's [skills docs](https://code.claude.com/docs/en/skills) explain.
3. **Ask for one component.** In Claude Code, type `/liquid-glass-design` and describe what you need, for example "navigation bar with blur effect" or "toolbar with interactive glass". It answers with SwiftUI or UIKit code built on the skill's patterns.
4. **Swap one screen first.** Replace the views on one screen, such as settings, and test it on an iOS 26 device or simulator.
5. **Add your fallback.** Wrap the glass code in an availability check and give older iOS versions a plain material background. The kit shows a Reduce Transparency fallback, but the older-iOS branch is yours to write.
6. **Copy the CSS to your site.** Start from the README's backdrop-filter block on your marketing page or dashboard.
7. **Run the checklist.** Check contrast, Reduce Transparency, Reduce Motion and VoiceOver labels before you ship.

### What the output looks like

The skill steers Claude Code toward code like this, taken from the skill file itself. Two glass icons sit in one container, so they blend and morph instead of fighting:

```swift
GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()

        Image(systemName: "eraser.fill")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()
    }
}
```

For UIKit, the skill shows a UIGlassEffect inside a visual effect view, with a tint, touch response, rounded corners and the clipping line that people often forget. For the web, the README starts from a see-through white fill, a 20 pixel blur with extra saturation and a thin light border.

The web version is close, not identical. CSS backdrop-filter gives a convincing blur and tint, while motion, light bending and touch response stay native.

### How much time it saves

I never timed a screen built by hand against the same screen built with the kit, so I will not give you a number. The saving I can describe is fewer wrong turns. When the assistant starts from iOS 26 patterns, you skip the round where it hands you an old blur view and calls it glass.

The bigger saving is consistency. When every screen uses the same few glass patterns, the app looks designed instead of patched one view at a time.

## By hand vs a generic AI prompt vs iOS Liquid Glass UI Kit

The Apple APIs are the same in all three columns. What changes is whether your assistant writes real iOS 26 glass code or old blur code, and whether accessibility and the web version get covered at all.

| | By hand | Generic AI prompt | iOS Liquid Glass UI Kit |
| --- | --- | --- | --- |
| Starting point | Apple docs and WWDC sessions | Quick code, but often uses old blur APIs instead of Liquid Glass | A skill with SwiftUI, UIKit and WidgetKit glass patterns |
| Uses the new iOS 26 APIs | Yes, if you read the docs first | Not always; many models learned from older code | Yes: glassEffect, glass button styles, UIGlassEffect |
| Several glass shapes together | Easy to miss in the docs | Usually separate glass views that fight | GlassEffectContainer, union and morphing examples |
| Accessibility | You find the settings yourself | Rarely mentioned | A Reduce Transparency fallback and a contrast checklist |
| Web version | Tune CSS blur values until it looks close | A generic frosted glass snippet | A backdrop-filter starting point plus Tailwind and shadcn patterns |
| Cost | Free, plus your weekend | Your existing AI plan | $29 once |

## What is inside iOS Liquid Glass UI Kit

Liquid Glass UI Kit is 5 Claude Code skills and a README. The main skill holds SwiftUI, UIKit and WidgetKit glass patterns, and the other four cover UI rules, styling, design tokens and brand design.

- The liquid-glass-design skill: SwiftUI, UIKit and WidgetKit patterns, called with /liquid-glass-design
- SwiftUI samples for glassEffect, tint, interactive glass, glass button styles and GlassEffectContainer
- Morphing and union examples with glassEffectID and glassEffectUnion
- UIKit samples for UIGlassEffect, UIGlassContainerEffect, scroll edge effects and toolbar items
- WidgetKit notes for accented rendering mode and accent groups
- A README with a CSS backdrop-filter version, an accessibility checklist and performance do and avoid lists
- Four more skills: UI rules (ui-ux-pro-max), ui-styling, design-system tokens and brand design

### What you do not get

- A finished Xcode project or app template. You add the code to your own project.
- Separate .swift or .css files per style. The code lives as samples inside the skill files and the README.
- Figma files. There are none in the download.
- A working style generator yet. The ui-ux-pro-max skill points to a search script and style data that are missing from the current download.
- Android or Flutter versions. The kit covers iOS and a web CSS version only.

## Who iOS Liquid Glass UI Kit is for, and who should skip it

This kit fits iOS developers who use Claude Code and want the iOS 26 look without digging through every API page first. It does not fit Android-first teams, or anyone who wants a finished app template or Figma files.

- For you if: You opened your app next to the iOS 26 system apps and winced.
- For you if: You tried building the glass effect from the WWDC session and got a gray smudge.
- For you if: You use Claude Code and it keeps reaching for old blur code.
- For you if: You need the web dashboard to look close to the app without a second design effort.
- Skip it if: You build Android-first or Flutter cross-platform. This is the iOS 26 design language, with a web CSS version only.
- Skip it if: You expect pixel-identical glass on the web. The CSS version is close, and the last part stays native.
- Skip it if: You want a finished app template, Figma files or drop-in Swift files. These are skills with code samples inside.

## FAQ

### What is Liquid Glass in iOS 26?

Liquid Glass is a material Apple introduced in iOS 26. It looks like glass that bends light and reacts to what sits behind it. Apple uses it for controls and navigation, such as tab bars, toolbars and sheets, so they float above your content.

### How do I add Liquid Glass in SwiftUI?

Rebuild your app with Xcode 26 first, because standard bars and controls update on their own. For a custom view, add the glassEffect modifier, and pass a shape such as a rounded rectangle. For buttons, use the glass button style.

### Can I make Liquid Glass with CSS?

You can get close. CSS backdrop-filter blurs whatever sits behind an element, and a see-through background plus a thin light border gives the glass feel. The light-bending and motion of real Liquid Glass are native features that CSS cannot fully copy.

### Do I need Xcode 26 to use the kit?

Yes for the Liquid Glass code, which needs the iOS 26 SDK. Users on older iOS versions will not see glass, so you still write a plain fallback for them. The CSS version in the README works in modern browsers.

### How do I install it?

Copy the five skill folders into ~/.claude/skills, as the README shows. Then ask Claude Code with /liquid-glass-design and a short description, such as a navigation bar with blur. It answers with SwiftUI or UIKit code built on the patterns in the skill.

### Does it work with ChatGPT?

The skill files are plain Markdown, so you can read the code samples anywhere and paste them into any editor. The /liquid-glass-design command itself needs Claude Code, which loads skill files on its own.

### Is it a one-time payment?

Yes, Liquid Glass UI Kit costs $29 once. There is no subscription. Polar or Gumroad sends the download right after payment.

### Will Apple reject my app for using these styles?

The main skill builds on the public Liquid Glass APIs Apple added in iOS 26, which is what Apple asks apps to use. Private APIs are a common reason for rejection, so check any code before you ship it. App Review looks at your whole app, so no kit can promise approval.

### What file format does the kit ship in?

Five skill folders of Markdown files with code samples inside, plus a README. There are no separate Swift or CSS files per style, no Xcode project and no Figma files.