Open Source · MIT · Pure CSS
liquidframe
**An iPhone mockup that gets Safari right.**
A pure-CSS iPhone 16 Pro with a realistic iOS 26 Liquid Glass Safari shell — titanium frame, Dynamic Island, and the part nobody else mocks up: Safari's chrome in every layout. Swap one class to change the mode. No build step, no dependencies.
How it works
1.
Copy the frame
Drop liquidframe.css in and copy the `.phone-frame` block from index.html — the titanium body, Dynamic Island, buttons, and the verbose Safari chrome markup are all wired up there.
2.
Pick a chrome mode
Swap one class on `.phone-frame` — `chrome-compact`, `chrome-bottom`, `chrome-top`, or `chrome-pwa` — to switch between iOS 26's Safari layouts. No JavaScript needed; each mode sets the correct safe-area insets.
3.
Drop your page in
Put your web page inside `.phone-screen` and it renders exactly as on a real iPhone. Tint `--chrome-top` / `--chrome-bot` to preview a themed app or a chrome-tinting library.
What's inside
Real iOS 26 Safari chrome
The frosted Liquid Glass URL pill and all three Safari layouts — the browser chrome almost no other mockup draws correctly.
Four modes, one class
Compact, Bottom, Top, and standalone PWA. Switch by swapping a single class on `.phone-frame` — and each reports the matching safe-area insets so your content reflows like the real thing.
Pure CSS, zero deps
Titanium frame, Dynamic Island, protruding buttons — all in plain CSS. No build step, no dependencies; liquidframe.js is optional.
Themeable & screenshot-ready
Tint the chrome, set the screen background, pick a titanium finish (Natural / Desert / Black / White). Perfect for marketing pages, design reviews, docs, and library demos.
See it
Open the live demo to flip through the chrome modes and finishes. Then copy liquidframe.css and the `.phone-frame` block into your own page — MIT-licensed, no dependencies.