# Liquid Glass > Thick, clear glass capsules with bright specular rims that float over vivid photography and bend the light behind them. - Nickname: Thick lens glass - Also called: Apple Liquid Glass, iOS 26 glass, Refractive glass - Category: Soft & Dimensional - Moods: Dreamy, Luxury, Calm, Techy - Industries: Travel & Hospitality, Luxury & Premium, Media & Entertainment, E‑commerce, AI Products - Style page: https://uilingo.dev/styles/liquid-glass/ Liquid Glass is Apple’s 2025 material: controls are slabs of clear, thick glass rather than frosted sheets. Each panel has a bright specular rim that catches light on the top-left and bottom-right, a lens-like glow along its inner edge and a glossy top sheen. Controls are capsules that float away from the screen edges over full-bleed, colourful imagery, so the picture is the colour and the glass stays almost colourless. ## Best for - Travel, hotel and booking apps over destination photography - Media players and camera/photo apps - Premium consumer apps that follow iOS/visionOS conventions - Maps, weather and widgets over live content ## Avoid for - Dense admin tables and long reading pages - Low-end Android and old browsers (blur + layered shadows are costly) - Brands without strong imagery to sit behind the glass ## Do - Put the colour in a full-bleed photo or scene; keep the glass nearly clear (white 35–55%), except the highlighted plan/CTA, which is blue→teal tinted glass - Give every glass panel a 1px bright rim, brighter at top-left, plus a soft inner edge glow - Float controls as capsules 12–16px away from screen edges - Reserve tinted blue glass for main CTAs; repeated card/plan actions use clear glass ## Don't - Don’t frost the glass into a flat grey blur — it must stay clear and lit - Don’t stack glass on glass more than two levels deep - Don’t use hard square corners or heavy dark drop shadows - Don’t put body text directly on busy imagery without a glass slab behind it ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Liquid Glass" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Thick, clear glass capsules with bright specular rims that float over vivid photography and bend the light behind them. Design keywords: clear thick glass, specular rim highlight, lens edge glow, floating capsule controls, full-bleed vivid imagery, glass tab bar droplet, continuous corners, tinted glass primary button. ## Visual language Clear, thick glass that floats over a vivid, full-bleed scene (a sunlit lagoon, a city at dusk, a product shot) — the demo paints it in pure CSS, no photo. Ordinary content glass is almost colourless — white at 35–55% with a strong backdrop blur and saturation boost — and reads as a solid lens because of light: a bright specular rim that peaks at the top-left and bottom-right corners, a soft inner glow along every edge and a glossy sheen across the top third. Controls are capsules and circles that hover 12–16px away from the screen edges; the scene provides the colour, the glass provides calm, legible structure. The only coloured glass is tinted blue: on main CTAs, and blue→teal on the highlighted plan, featured card and CTA band. ## Signature details (must be visible) - Full-bleed scene behind everything on a position:fixed .ui-bg layer; the bg token #D6E8F6 is only the fallback colour under the scene and is never seen as a flat page background - CSS-only scene recipe (horizon at 46%): sky linear-gradient(180deg,#3D92EC 0%,#9CCCF5 30%,#FFD8B0 41%,#FFB08E 46%) → sea #7FE0D6 → #47CFCB 60% → #4AA6E0 100%; sun radial-gradient(circle at 74% 30%,#FFFBEA 0 2.4%,rgba(255,226,170,.95) 3.6%,transparent 26%); two hill silhouettes (#87A6E8 and #64BF92, inline SVG data URI) standing on the horizon; wave lines repeating-linear-gradient(176deg,transparent 0 22px,rgba(255,255,255,.16) 22px 24px) on the lower 52%. The sky→sea seam is blended over 48px (stops at calc(46% - 24px) and calc(46% + 24px)), never a hard band - Content glass fill: background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 46%, transparent 60%), rgba(255,255,255,.46); backdrop-filter: blur(14px) saturate(190%) brightness(1.06) - Specular rim: a 1.25px masked ring (::before with padding + mask-composite: exclude) filled with linear-gradient(135deg, #fff 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,.04) 48%, rgba(255,255,255,.18) 70%, rgba(255,255,255,.95) 100%) - Lens thickness: box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 0 22px rgba(255,255,255,.34), inset 0 -16px 26px -20px rgba(20,60,120,.28), 0 10px 30px rgba(10,30,60,.16) - Everything interactive is a capsule (border-radius: 999px); panels use large continuous corners of 28–38px (tokens lg/xl) - Tinted blue glass is for main CTAs only (nav CTA, hero CTA, mobile sticky CTA): background: , color-mix(in srgb,#0062D6 86%,transparent), white label. Plan and card actions are clear glass; on blue→teal surfaces (highlighted plan, CTA band) the button flips to white glass rgba(255,255,255,.82–.9) with dark or blue text - Blue→teal tinted glass, used ONLY on the highlighted plan, the mobile featured card and the CTA band: background: , linear-gradient(140deg, color-mix(in srgb,#0062D6 78%,transparent), color-mix(in srgb,#0FA3B1 70%,transparent)) (teal = chart-3 token), white text - Selected states are brighter glass droplets that scale up 4–8% (tab bar item, segmented option, active chip) with spring easing cubic-bezier(.34,1.32,.64,1) ## Design tokens — use these exact values Colours (light mode): - background #D6E8F6 - surface rgba(255,255,255,0.46) - surface-2 rgba(255,255,255,0.28) - text #0A1626 - text-muted #33465C - primary #0062D6 (text on it #FFFFFF) - secondary #FF7A59 (text on it #2A0E05) - accent #FFB547 - border rgba(255,255,255,0.7) - success #0F8A4F · warning #A85F00 · danger #D92D3A - chart series #0062D6, #FF7A59, #0FA3B1, #E39B12, #7B5CFF Radius: sm 14px, md 20px, lg 28px, xl 38px, pill 999px Border width: 1px Shadows: sm `0 2px 10px rgba(10,30,60,0.10)`, md `0 10px 30px rgba(10,30,60,0.16)`, lg `0 24px 60px rgba(10,30,60,0.24)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 420ms cubic-bezier(.34,1.32,.64,1) ## Typography (Latin + Thai) - Headings: Geist 600/700 with Thai fallback Noto Sans Thai 600/700 - Body: Geist 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap - CSS stacks: heading `"Geist", "Noto Sans Thai", system-ui, sans-serif`; body `"Geist", "Noto Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 5.5rem), heading weight 700, heading tracking -0.035em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Noto Sans Thai is a loopless, evenly weighted sans like Apple’s own Thai system face, matching Geist’s neutral SF-like grotesque and tall x-height. ## Components - Allowed decorative literals beyond the tokens: the rim gradient whites, the sheen whites, the edge shade rgba(20,60,120,.28) and the focus halo 0 0 0 5px rgba(0,98,214,.25); everything else comes from the tokens - Spacing: base unit = 8px × 1.05 = 8.4px; all padding, gaps and section spacing are multiples of it (sections 84px block padding) - Buttons: capsule, min-height 44px (56px in the hero); main CTA = tinted blue glass with white text; secondary and repeated card/plan actions = clear glass with dark text; hover scale(1.04), press scale(.96) with spring easing - Nav: a floating capsule 18px from the top, inset from the page edges, with the current link as a small white glass pill inside it and one tinted-blue CTA at the right - Cards: clear glass with rim + sheen, radius 28px, hover lifts 4px and gains a larger soft shadow; the highlighted plan is blue→teal tinted glass with white text and a white-glass button - Inputs: recessed capsules — rgba(255,255,255,.5) with an inset top shadow; focus = brighter fill rgba(255,255,255,.75), 1px white ring plus the 5px blue halo - Switch: green track #34C759, thumb is a wide glass lozenge (34×24px) with an inner gradient so it looks like a magnifying lens - Segmented control and tabs: a glass capsule track; the selected segment is an opaque white droplet with shadow - Badges and chips: small white-glass capsules with a 1px inner highlight; status colour only in the text - Charts: rounded 3px line with a soft coloured drop shadow, capsule bars with a white highlight on the left half, round-capped donut over a white-glass track ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: pill style. Sections in order: hero → features → showcase → stats → testimonials → pricing → faq → cta. Feature section as grid. Hero: min-height: min(100vh, 920px); the headline, lead and two capsule CTAs sit inside one large clear glass slab (radius 38px) centred over the scene, so text never touches busy pixels. Text on the scene: section titles and one-line subtitles may sit directly on it with text-shadow 0 1px 12px rgba(255,255,255,.7); any paragraph longer than one line sits in a glass panel. Every content block (features, stats, testimonials, pricing, FAQ items, footer) is its own glass panel. Features: 6 clear-glass cards in a 3×2 grid at ≥1024px. Showcase: copy column on the left, and on the right one large glass panel holding a segmented capsule control (Map / Itinerary / Bookings), a chart card and two KPI glass cards. Pricing: three plans, side plans clear glass with clear-glass buttons, middle plan blue→teal tinted with a white-glass button. Final CTA band is blue→teal glass with a white input and button. Dashboard: a floating glass rail detached 14px from the window edges and a floating capsule top bar over the same scene. The tab-bar droplet and lens switch belong only on mobile and form pages. ## Content Use realistic product copy (fictional brand) suited to: Travel, hotel and booking apps over destination photography. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Put the colour in a full-bleed photo or scene; keep the glass nearly clear (white 35–55%), except the highlighted plan/CTA, which is blue→teal tinted glass - Give every glass panel a 1px bright rim, brighter at top-left, plus a soft inner edge glow - Float controls as capsules 12–16px away from screen edges - Reserve tinted blue glass for main CTAs; repeated card/plan actions use clear glass ## Don't - Don’t frost the glass into a flat grey blur — it must stay clear and lit - Don’t stack glass on glass more than two levels deep - Don’t use hard square corners or heavy dark drop shadows - Don’t put body text directly on busy imagery without a glass slab behind it - Flat, grey, heavily frosted panels on a dark blob background — that is Glassmorphism, not Liquid Glass - Saturated colour inside ordinary content glass; only main CTAs and the highlighted plan / featured card / CTA band are tinted - More than one tinted-blue button inside a single card or plan row — repeated actions are clear glass - Square or small-radius corners, hard 1px solid borders or dark drop shadows - Multi-line body text directly on the scene without a glass panel behind it, or a hard horizon band running through headings - Glossy plastic gradients and bubbles (Frutiger Aero), 3D window stacks (spatial UI), blurring more than two stacked layers or animating backdrop-filter on scroll ## Stack notes One self-contained HTML file with a