I Built the iOS 27 Liquid Glass Look in Flutter (No Shaders)

#flutter #dart #ios #showdev

This week at WWDC 2026, Apple refined Liquid Glass for iOS 27. The headline is a translucency slider that runs from ultra clear to fully tinted, and the whole system reacts to motion: surfaces lens the background, catch specular highlights, and pick up tint from the content behind them.

I wanted to see how close I could get to that look in Flutter. Two problems showed up fast.

Flutter does not ship a Liquid Glass widget

In April 2026 the Flutter team froze new Material and Cupertino design work inside the SDK. New design work, including any iOS 26/27 Cupertino styling, moves to standalone packages later. So there is no official Liquid Glass widget today, and there will not be one for a while.

The community filled the gap with packages that reach for the real optics: BackdropFilter, custom FragmentProgram shaders, refraction, the works. That is the faithful route and it is genuinely impressive. But it also means offscreen render passes and shader code for what is, at the end of the day, a card with a nice background.

I went the other way. I built the look, not the optics, with no shaders and no BackdropFilter at all.

What Liquid Glass actually is (and what I skipped)

Be honest about this part. Apple's Liquid Glass is a real-time optical simulation: it bends light per pixel, samples the layer behind the element, and reacts to device motion. Reproducing that needs Metal-level control of the render pipeline.

I did not reproduce any of that. What I kept is the visual vocabulary that reads as glass:

translucent fills layered over a vivid background
light, semi-transparent borders that catch a highlight
soft depth shadows
generous rounded corners

That is Liquid-Glass-inspired, not Liquid Glass. You get the look; you do not get the lensing. The upside: no offscreen blur pass, so it stays cheap on mid-range devices.

Building it with utility classes

I used Wind UI, our utility-first styling library for Flutter. Think Tailwind, but it compiles classNames to real Flutter widgets. The glass surface is just a WDiv with a className string. No custom painter, no shader, no nesting ten widgets deep.

Here is the core of the translucency card:

WDiv(
  className: '''
    w-[360px] flex flex-col gap-6 p-7 rounded-3xl
    border border-white/40 dark:border-white/30
    bg-white/15 dark:bg-white/10
    shadow-2xl shadow-black/30 dark:shadow-black/50
  ''',
  children: [
    // settings icon, the iOS 27 badge, the slider, the buttons
  ],
)

Read that className and you can see the whole trick:

bg-white/15 is a 15% white fill. Over a colorful background it reads as frosted glass. Wind parses the /15 and applies it with Color.withAlpha, no Opacity widget needed.
border border-white/40 is the catch-light edge. A thin, 40% white border is what your eye reads as the rim of a glass panel.
shadow-2xl is a drop shadow for depth. Important: this is a drop-shadow blur (it softens the shadow itself), not a backdrop blur. The content behind the card is never sampled or blurred.
rounded-3xl and the layered translucency do the rest.

The "glass over color" effect needs something vivid behind it, so the card sits on a gradient with a few color orbs (also just translucent WDivs):

WDiv(
  className: '''
    relative w-[420px] h-[600px] overflow-hidden rounded-[44px]
    bg-gradient-to-br from-orange-300 via-pink-500 to-purple-700
  ''',
  children: [
    WDiv(className: 'absolute -top-14 -left-10 w-56 h-56 rounded-full bg-amber-200/40'),
    WDiv(className: 'absolute top-40 -right-14 w-64 h-64 rounded-full bg-fuchsia-300/40'),
    // the glass card on top
  ],
)

The orbs are not blurred either. They are translucent circles, and the layered transparency is what sells the depth.

Four surfaces, same primitives

I built four iOS-27-style surfaces this way. Same building blocks (translucent fills, borders, shadows, a gradient), different layouts.

1. The translucency control card, the iOS 27 headline feature:

Live and runnable: https://fluttersdk.com/wind/snippets/63ygefgd/flutter-ios-27-liquid-glass-translucency-control-card

2. A floating glass tab bar over a gradient home:

https://fluttersdk.com/wind/snippets/ujfa333h/flutter-liquid-glass-tab-bar-with-floating-navigation

3. A now-playing card where the album art bleeds its color through the surface:

https://fluttersdk.com/wind/snippets/78hfr0re/flutter-liquid-glass-music-player-with-now-playing-card

4. The iOS 27 Siri panel with a soft glow from the Dynamic Island:

https://fluttersdk.com/wind/snippets/nt4rbedt/flutter-ios-27-siri-ai-panel-with-dynamic-island-glow

Every one of these is a WDiv tree with className strings. Open any playground link and you can read the whole source and edit it live.

What I learned

You do not need a shader for the look. Layered translucency over a vivid background gets you most of the way, and it is cheap. Save the shaders for when you actually need refraction.
The border is doing more work than the fill. A thin border-white/40 is the single class that makes a translucent box read as glass instead of a faded box.
Be honest in your copy. This is Liquid-Glass-inspired, not the real lensing. Developers notice, and the honest version is the more useful tutorial anyway.
Utility classes keep the surface readable. The whole glass card is one className string you can scan in a second, not a BoxDecoration buried in a Container buried in a Stack.