Liquid Glass UI Prompts: 20+ Templates That Work

Liquid Glass UI Prompts: 20+ Templates That Work

When Apple shipped Liquid Glass with iOS 26, my feed turned into a wall of screenshots overnight — floating toolbars, refracted app icons, control centers that looked like they were carved out of actual glass. Everybody wanted it. So naturally, everybody started typing "make it liquid glass" into their favorite AI coding tool and hoping for the best.

It doesn't work like that. I know because I burned through roughly 150 prompt variations across several AI UI builders while putting this guide together, and most of them produced the same three failure modes: a gray smear where a card should be, text that vanishes into the background, or a "glass" panel that reads more like a foggy plastic sheet than anything Apple would ship. A few prompts, though, consistently nailed it — clean blur, legible text, a believable sense of depth and light.

This guide is the result of that testing. It's longer and more technical than most "prompt list" posts you'll find, because liquid glass is genuinely more complex than the glassmorphism trend from a few years back — there's a light-bending, specular-highlight component to it that most Tailwind tutorials skip entirely. I'll walk through what actually makes the effect read as "glass" instead of "blur," give you 25 categorized prompts you can paste directly into Claude, Cursor, v0, Bolt, Lovable, or whatever you're building with, and cover the failure modes, accessibility issues, and performance costs nobody mentions until their Lighthouse score tanks.

Quick Takeaways

• Real liquid glass needs five things working together, not four: blur, a translucent tint, a border, a shadow, and a specular highlight. Skip the highlight and you get flat glassmorphism, not liquid glass.

• Almost every "ugly" AI-generated glass result traces back to one root cause: the prompt described a look ("make it glassy") instead of properties (exact Tailwind utility classes).

• Contrast is the single biggest point of failure. If your prompt doesn't explicitly demand a minimum contrast ratio, the AI will happily generate white text on a light background that's unreadable in three seconds.

• These prompts are tool-agnostic — they work with any AI assistant that can output React + Tailwind, and most translate cleanly to Vue or plain HTML/CSS too.

What Liquid Glass Actually Is (And Why Plain Backdrop-Blur Falls Short)

Here's the part most guides gloss over. "Glassmorphism" — the frosted-panel trend from 2020-2021 — was really just three CSS properties: blur, a translucent background, and a border. Apple's Liquid Glass in iOS 26 is a step beyond that. Apple's own design documentation describes it as a material that dynamically bends and shapes light, reacting to the content and controls beneath it and adapting between light and dark environments in real time.

Two things separate real liquid glass from a basic frosted div:

1. Specular highlights. Real glass catches light unevenly — brighter along one edge, dimmer along another. A flat semi-transparent box with a uniform border doesn't do this. You need a subtle gradient overlay or an inset highlight to sell the illusion.

2. Content-aware adaptation. Apple's glass shifts its tint and contrast based on what's behind it. You obviously can't replicate Apple's exact rendering pipeline in a Tailwind card, but you can approximate it by conditionally adjusting opacity based on whether the glass sits over a light or dark region of the page.

You don't need to reproduce Apple's engine to get a convincing result on the web. But if your prompt only asks for blur + transparency + border, you'll land on "nice frosted card" — not "liquid glass." That's exactly the gap I kept running into with generic prompts, and it's why the prompts below all include a highlight instruction.

The 5 Properties That Make Liquid Glass Work

The base recipe I used across almost every prompt below:

backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl shadow-xl
ring-1 ring-inset ring-white/10

That sixth utility — ring-1 ring-inset — is doing the specular-highlight job. It's a cheap, single-class way to fake the "light catching an edge" look without hand-writing a gradient overlay for every component. Keep this snippet nearby; every prompt in this article assumes it as a starting point and layers component-specific instructions on top.

One more thing worth internalizing before you start prompting: be a CSS dictator, not an art director. "Make it feel premium and Apple-like" is a vibe, and AI models fill vibes in with whatever glassmorphism screenshot was most common in their training data — usually something outdated. "Use backdrop-blur-xl, bg-white/10, border-white/20" is an instruction, and instructions are what these tools are actually good at following. Every prompt below leans hard into specificity for exactly this reason.

Liquid Glass Card Prompts

Cards are the easiest place to start because there's no scroll behavior, no state management, no edge cases — just a static container. If your AI tool can't get a glass card right, none of the rest will go well either.

Prompt 1 — Basic Glass Card

Build a card component in React with Tailwind CSS using a liquid glass effect. Apply backdrop-blur-xl, bg-white/10, border border-white/20, rounded-2xl, shadow-xl, and ring-1 ring-inset ring-white/10 for a specular highlight. Include a title, a two-line description, and a small pill-shaped tag. Text must be text-white with text-white/70 for secondary copy so contrast stays readable. Place it over a diagonal gradient background (indigo to violet) so the glass is actually visible.

Prompt 2 — Glass Profile Card

Create a user profile card with liquid glass styling in React and Tailwind. Circular avatar centered at the top, name, role, and a row of three stat counters (followers, projects, rating). Use backdrop-blur-2xl, bg-white/5, border border-white/10, and ring-1 ring-inset ring-white/10 for the highlight. Add a soft outer glow with shadow-[0_0_40px_rgba(255,255,255,0.08)]. Place the card on a dark mesh-gradient background so the blur has enough contrast to read.

Prompt 3 — Glass Pricing Card

Generate a pricing card component with a liquid glass effect. Include the plan name, price with billing cycle toggle, five feature bullet points with checkmark icons, and a CTA button. The button itself should also be glass-styled: bg-white/20, backdrop-blur-sm, border border-white/30. Use border-white/15 for the outer card and highlight the "Most Popular" tier with a brighter bg-white/15 fill and a small badge. React, Tailwind CSS.

Prompt 4 — Glass Feature Card Grid

Build a responsive three-column feature grid. Each card: backdrop-blur-xl, bg-white/8, border border-white/15, rounded-xl, ring-1 ring-inset ring-white/10. Each card contains an icon, a title, and a two-line description. On hover, increase the fill to bg-white/15, scale to 1.02, and transition over 200ms with ease-out. Stack to a single column below the md breakpoint. Dark gradient background. React, Tailwind CSS.

Prompt 5 — Glass Testimonial Card

Create a testimonial card with liquid glass styling: quote icon, italicized testimonial text, avatar, name, and company. Use backdrop-blur-lg, bg-white/10, border-white/20. Wrap the card in a 1px gradient border by using an outer div with a diagonal gradient background and p-[1px], with the glass card as the inner child. React, Tailwind CSS.

Prompt 6 — Glass Stat/KPI Card

Build a compact KPI card for a dashboard using liquid glass: a large number, a label beneath it, and a small trend indicator (up/down arrow with percentage, colored green or red). Use backdrop-blur-xl, bg-white/8, border border-white/15, rounded-xl, ring-1 ring-inset ring-white/10. Keep padding tight (p-4) since this will sit in a 4-up grid. React, Tailwind CSS.

Glass Navigation: Navbar & Sidebar Prompts

The first thing everyone tries after discovering this trend is a glass navbar — and it's also the first thing that breaks. The problem is scroll state: your navbar needs to look convincing sitting over a busy hero image and over a plain white section further down the page. If your prompt doesn't account for both, you'll get one good screenshot and one broken one.

Prompt 7 — Sticky Glass Navbar

Build a sticky navigation bar with a liquid glass effect in React. Use backdrop-blur-xl, bg-white/10, border-b border-white/10. Logo on the left, four nav links centered, CTA button on the right. Fix the navbar at the top with z-50. Add a scroll listener with useState and useEffect: once window.scrollY > 20, increase the fill to bg-white/15 and add shadow-lg so the bar visually separates from scrolled content. Tailwind CSS.

Prompt 8 — Glass Mobile Menu

Create a responsive navigation. On desktop, show a horizontal glass navbar (backdrop-blur-xl, bg-white/10). On mobile, replace it with a hamburger icon that opens a full-screen overlay using backdrop-blur-2xl and bg-black/40. Menu items should be large, centered, and animate in with a staggered fade-up (100ms delay per item). Include a smooth open/close transition using Tailwind's transition and duration-300 utilities. React.

Prompt 9 — Glass Sidebar

Build a collapsible dashboard sidebar with liquid glass styling: 280px wide expanded, 80px collapsed. Use backdrop-blur-xl, bg-white/5, border-r border-white/10. Nav items include an icon and label; hide labels when collapsed. The active item gets bg-white/10 and a left accent bar (border-l-2 border-white). Add a toggle button at the bottom. Dark background so the glass reads clearly. React, Tailwind CSS.

Prompt 10 — Glass Tab Navigation

Create a horizontal tab navigation with four tabs, each with an icon and label. The active tab gets bg-white/15, backdrop-blur-sm, and a glowing bottom border (border-b-2 border-white/60 with a subtle shadow-[0_2px_10px_rgba(255,255,255,0.3)]). Inactive tabs stay transparent with text-white/60. Animate the active-state transition over 200ms. The content panel below should also use the base glass recipe. React, Tailwind CSS.

Glass Hero Sections That Actually Convert

This is where liquid glass earns its place on a real product page rather than just looking good in a dribbble shot. A glass panel over a hero image adds real depth — but only if the headline stays legible. Contrast, not blur intensity, is what makes or breaks a hero.

Prompt 11 — Glass Hero with Dual CTA

Build a hero section with a full-bleed gradient background (dark indigo to violet, with a faint radial glow behind the content). Center a liquid glass container: backdrop-blur-xl, bg-white/10, border border-white/20, rounded-3xl, p-12, ring-1 ring-inset ring-white/10. Inside: a large headline (text-5xl font-bold text-white), a subtitle in text-white/70, and two CTA buttons — one solid white (bg-white text-black), one glass-styled (bg-white/20 backdrop-blur-sm border border-white/30). React, Tailwind CSS.

Prompt 12 — Glass Hero with Stats Bar

Create a hero section with a dark mesh-gradient background and two or three slow-moving blurred gradient blobs behind the content (pure CSS, animate-pulse or a custom keyframe drifting the blob position). Center the headline and subheading, then below the CTA buttons add a glass stats strip: a horizontal bar (backdrop-blur-xl, bg-white/5, border-white/10) containing four metrics (e.g. "12M+ requests/day") separated by thin vertical dividers (border-l border-white/10). React, Tailwind CSS.

Prompt 13 — Split Hero with Floating Glass Card

Build a split hero: left column has a headline, supporting paragraph, and CTA button on a dark solid background; right column shows a liquid glass card floating over a colorful abstract gradient with soft blurred shapes behind it. The glass card contains a mock dashboard preview — a small bar chart and two stat rows. Use backdrop-blur-2xl on the card and a slow vertical float animation (translateY oscillating a few pixels via @keyframes). React, Tailwind CSS.

Glass Modals & Popups: Frosted Dialogs Done Right

Glass modals look incredible in a screenshot and turn into an accessibility problem the moment real content sits behind them. The single most common mistake: prompting for a transparent backdrop overlay instead of a dark one, which leaves the modal fighting for contrast against whatever happens to be on the page underneath it.

Prompt 14 — Glass Confirmation Modal

Create a centered confirmation modal in React. Backdrop overlay: bg-black/60 backdrop-blur-sm, covering the full viewport. Modal container: backdrop-blur-2xl, bg-white/10, border border-white/20, rounded-2xl, ring-1 ring-inset ring-white/10. Include a warning icon, a title, a short description, and two buttons: "Cancel" (ghost style, text-white/70) and "Confirm" (glass with a red tint, bg-red-500/20 border-red-400/30). Animate the modal in with a scale-and-fade transition. Tailwind CSS.

Prompt 15 — Glass Notification Toast

Build a toast notification that slides in from the top-right corner. Glass styling: backdrop-blur-xl, bg-white/10, border border-white/20, ring-1 ring-inset ring-white/10. Include a close button, an icon, a title, a one-line message, and a timestamp. Auto-dismiss after 5 seconds, with a thin progress bar along the bottom edge that animates from full width to zero. React, Tailwind CSS.

Prompt 16 — Glass Command Palette

Create a Cmd+K command palette. Full-viewport dark overlay: bg-black/50 backdrop-blur-sm. Centered glass container: backdrop-blur-2xl, bg-gray-900/80, border border-white/10, rounded-xl. Search input pinned to the top with a divider beneath it, then a scrollable list of commands grouped by category, each with an icon, label, and keyboard shortcut hint. The highlighted item gets bg-white/10. Support arrow-key navigation and Escape to close. React, Tailwind CSS.

Glass Buttons & CTAs: Getting the Glossiness Right

Buttons are the most delicate glass component because the margin for error is tiny. Go too heavy on the blur and the button visually disappears into the page. Go too light and it just looks like a gray rectangle with no personality.

Prompt 17 — Glass Button Set

Create four button variants with Tailwind CSS: Primary (bg-white/20 backdrop-blur-sm border border-white/30, hover:bg-white/30), Secondary (bg-white/10 border-white/20), Ghost (transparent with border-white/15, hover:bg-white/10), and a circular Icon button (bg-white/15 backdrop-blur-sm). All should use rounded-xl, a subtle shadow-lg, and a 150ms hover transition. Display them together on a dark gradient background for contrast.

Prompt 18 — Glass Floating Action Button

Build a floating action button pinned to the bottom-right corner. Circular, backdrop-blur-xl, bg-white/15, border border-white/20, shadow-xl, with a plus icon centered. On click, it expands upward to reveal three smaller glass action buttons stacked vertically, each animating in with a staggered delay and a spring-like ease. React, Tailwind CSS.

Prompt 19 — Glass Toggle Switch

Create a toggle switch with liquid glass styling. Track: bg-white/10 border border-white/20. Active state: track shifts to bg-blue-500/30 border-blue-400/30. The knob itself should be glass: backdrop-blur-sm bg-white/50 ring-1 ring-inset ring-white/40. Animate the knob position with a spring transition (transition-transform duration-200 ease-out). Include a text label to the left of the switch. React, Tailwind CSS.

Glass Form Fields and Inputs (The Category Nobody Covers)

Almost every liquid glass tutorial stops at cards, navbars, and buttons — and skips forms entirely, which is a shame, because glass inputs are genuinely one of the trickiest components to get right. Placeholder text, focus rings, and error states all need to survive on top of a blurred, semi-transparent background without turning into visual soup.

Prompt 20 — Glass Input Field

Create a text input component with liquid glass styling. Container: backdrop-blur-md, bg-white/8, border border-white/15, rounded-xl. On focus, transition the border to border-white/40 and add a soft outer glow (ring-2 ring-white/20). Placeholder text uses placeholder:text-white/40. Include a floating label that shrinks and moves above the input when focused or filled. Add an error state variant with border-red-400/50 and a small red helper message beneath the field. React, Tailwind CSS.

Prompt 21 — Glass Contact Form

Build a full contact form with liquid glass fields (name, email, message textarea) inside a glass container (backdrop-blur-xl bg-white/8 border border-white/15 rounded-2xl p-8). Each field uses the glass input styling above. Submit button is a solid white pill for contrast against the surrounding glass. Include basic client-side validation with inline error messages. React, Tailwind CSS.

Glass Dashboard & Data Widgets

Prompt 22 — Glass Chart Panel

Build a dashboard panel containing a line chart (using Recharts or Chart.js) inside a glass container: backdrop-blur-xl, bg-white/8, border border-white/15, rounded-2xl, ring-1 ring-inset ring-white/10. Include a small header with a title, a time-range dropdown, and a trend badge. Make sure the chart's grid lines and axis labels use low-opacity white (stroke-white/20, fill-white/50) so they don't fight the glass background. React, Tailwind CSS.

Prompt 23 — Glass Loading Skeleton

Create a loading skeleton state for a glass card grid. Each skeleton card keeps the same glass container (backdrop-blur-xl bg-white/8 border border-white/15 rounded-xl), but replaces content with animated shimmer bars (bg-white/10 blocks with a animate-pulse or a moving gradient sweep). Match the skeleton's dimensions exactly to the real card so there's no layout shift when content loads. React, Tailwind CSS.

Dark Mode and Light Mode Glass

Almost every glass tutorial you'll find online only demonstrates it on a dark background — and there's a real reason for that: blur reads far more clearly against dark, saturated colors than it does against white. Making liquid glass work convincingly in light mode takes a different approach, leaning more on shadow and less on blur intensity.

Prompt 24 — Dual-Mode Glass Card

Build a card component that supports both light and dark mode using Tailwind's dark: prefix. Dark mode: backdrop-blur-xl bg-white/10 border-white/20 text-white. Light mode: backdrop-blur-xl bg-black/5 border-black/10 text-gray-900 shadow-xl. Include a theme toggle button and render the card over an appropriate background gradient in each mode so the glass effect stays visible in both. React with a dark mode context/state.

Prompt 25 — Adaptive Glass Navbar

Create a navbar that adapts between light and dark mode. Dark: bg-white/10 border-white/10 text-white. Light: bg-white/70 border-gray-200/50 text-gray-900, with a stronger shadow-lg to compensate for the lower blur visibility. Include a toggle in the nav and animate the transition between modes with transition-colors duration-300. React, Tailwind CSS.

Why Your Liquid Glass Looks Muddy (Troubleshooting Table)

If you've tried a few of these and still aren't happy with the output, it's worth diagnosing exactly where it's going wrong rather than just re-rolling the prompt and hoping.

Accessibility: The Part Everyone Skips

Liquid glass is a contrast problem wearing a design trend's clothing. A few non-negotiables to bake into your prompts:

• Always specify a minimum text contrast. Don't just say "white text" — say "text must maintain at least a 4.5:1 contrast ratio against the glass background," and if the AI tool supports it, ask it to darken the backdrop tint (bg-black/20 behind glass over busy imagery) rather than relying on blur alone.

• Respect prefers-reduced-transparency and prefers-reduced-motion. Some users set these at the OS level specifically because heavy blur and motion cause discomfort. A production-ready prompt should include a fallback: swap backdrop-blur-xl for a solid bg-gray-900/95 when the media query matches, and disable float/scale animations.

• Never rely on glass alone to convey state. An active tab or a "popular" pricing tier shouldn't be distinguished by opacity alone — add a border, icon, or text label too, since low-vision users may not perceive small opacity differences.

• Test at actual device brightness, not just your monitor. Glass effects that look fine on a bright desktop display can crush contrast on a phone at 30% brightness outdoors.

Performance: When Glass Gets Too Heavy

backdrop-filter is one of the more GPU-expensive properties in CSS, because the browser has to re-sample everything behind the element on every single frame it's visible — including during scroll. Stack several of these on one screen and you'll feel the jank, especially on mid-range Android devices.

What actually helps:

• Cap it at 2–3 visible glass elements per viewport. Beyond that, the performance cost climbs faster than the visual payoff.

• Promote glass layers with will-change-transform so the browser can composite them on their own GPU layer instead of repainting constantly.

• Never put backdrop-blur on individual items inside a scrolling list. Apply it once to a container that scrolls beneath, not to every row.

• Drop blur intensity on mobile with a responsive class: backdrop-blur-md lg:backdrop-blur-xl.

• Test on a real mid-tier phone. Chrome DevTools' device simulation throttles CPU but doesn't accurately reproduce GPU compositing costs, so it will lie to you about how smooth this actually feels in someone's hand.

Full Page Template: Liquid Glass Landing Page

Prompt 26 — Complete Liquid Glass Landing Page

Build a complete landing page using the liquid glass design language, in React with Tailwind CSS, fully responsive. Background: a dark gradient from slate-950 to violet-950, with two or three large blurred gradient blobs drifting slowly behind the content. Sections: (1) a sticky glass navbar — backdrop-blur-xl bg-white/5 border-b border-white/10, logo, four nav links, one CTA button; (2) a hero with a centered glass container containing a headline, subtitle, two CTA buttons, and a glass stats strip with four metrics; (3) a three-column glass feature card grid with icons, titles, and descriptions; (4) a row of glass testimonial cards with quotes and avatars; (5) a large glass CTA section with a headline and an email signup form using glass input styling; (6) a glass-styled footer with link columns and a copyright line. Every glass element should share the base recipe — backdrop-blur-xl bg-white/10 border border-white/20 ring-1 ring-inset ring-white/10 — with opacity adjusted per section so nothing looks identical or flat. Ensure text contrast stays readable throughout, and include a prefers-reduced-motion fallback that disables the background blob animation.

A Quick Pre-Ship Checklist

Before you call any of these "done," run through this list:

• [ ] Does the glass sit over a background with enough visual variation for the blur to actually be visible?

• [ ] Is every piece of text at or above 4.5:1 contrast against the glass?

• [ ] Does the component still look intentional (not just "blurry") without a specular highlight or border?

• [ ] Have you capped glass elements to 2–3 visible at once per screen?

• [ ] Does the page have a fallback for prefers-reduced-transparency and prefers-reduced-motion?

• [ ] Have you tested scroll performance on a real mid-range phone, not just desktop DevTools?

• [ ] Does state (active/selected/error) rely on more than just opacity differences?

Frequently Asked Questions

What is liquid glass UI design? Liquid Glass is the design language Apple introduced across iOS, iPadOS, and macOS starting in 2026. It's built on translucent materials that blur and tint whatever sits behind them while adding light-based highlights that shift depending on content and context. On the web, we approximate it with backdrop-filter, translucent backgrounds, borders, shadows, and a specular-highlight layer — it's essentially glassmorphism with an extra layer of polish.

How is liquid glass different from regular glassmorphism? Classic glassmorphism is really just blur plus a translucent fill plus a border. Liquid glass adds a fourth dimension: the appearance of light catching the surface unevenly, plus (in Apple's native implementation) real-time adaptation to whatever's behind it. On the web you can't fully replicate the adaptive part, but adding a specular highlight gets you most of the way to a convincing result.

How do I get AI tools to generate liquid glass properly? Name the exact Tailwind utilities instead of describing a vibe. Specify backdrop-blur-xl, an exact background opacity like bg-white/10, a border, a shadow, and a highlight (ring-1 ring-inset ring-white/10 or a gradient overlay). Also state your contrast requirement outright — "text must remain readable against the blur" is easy for an AI model to ignore unless you're specific about it.

Does liquid glass work well on light backgrounds? It does, but it needs a different recipe. Blur is naturally more visible against dark, saturated backgrounds. On light backgrounds, drop the fill to something like bg-black/5 or bg-white/70, use dark text, and lean more heavily on shadow for depth since the blur itself will read much more subtly.

Is liquid glass bad for site performance? backdrop-filter is genuinely one of the more GPU-intensive CSS properties around, since it forces a re-sample of everything behind the element on every frame. A handful of glass elements per screen is fine on most devices. Stack seven or more, especially inside scrolling containers, and you'll start seeing real jank on mid-range phones.

Can I use these prompts outside of React or Tailwind? Yes. The underlying CSS properties — backdrop-filter, background, border, box-shadow — are framework-agnostic. If you're working in Vue, Svelte, or plain HTML/CSS, just swap the "React, Tailwind CSS" instruction at the end of each prompt for your actual stack; the Tailwind utility classes translate directly to raw CSS values if you need them (backdrop-blur-xl is backdrop-filter: blur(24px), for reference).

Do these prompts work with any AI coding tool? They should work with any assistant capable of writing React and Tailwind — Claude, ChatGPT, Cursor, v0, Bolt, Lovable, and similar tools all handle these the same way, since the instructions are really just precise CSS specifications rather than tool-specific syntax.

Liquid glass is a genuinely nice-looking design language, but it rewards precision, not vibes. Every prompt above hands the AI exact values instead of an aesthetic direction, which is the actual difference between a component that looks like it belongs in iOS 26 and one that looks like a blurry div someone gave up on. Start from the base five-property recipe, adjust opacity per component, always specify contrast, and test on a real phone before you ship it.