How to Make WhatsApp Web Look Like an iPhone (2026)

There's a particular calm to the way an iPhone looks. Not the wallpaper, not the icons — the system. Soft gray backgrounds. Cards that float slightly above the surface behind them. One blue that means "tap this." Text that's black, or gray, or lighter gray, and never anything else.

Open WhatsApp Web next to it and the difference is jarring. Green header, doodle pattern, one flat surface for everything.

Here's how to bring the iOS system look to WhatsApp Web — the whole-OS aesthetic, not just the Messages app.

First: iPhone Look vs iMessage Look

Worth separating these, because they're related but not the same thing.

The iMessage look is the Messages app specifically: blue sent bubbles, gray received bubbles, white background. If that's what you're after, we have a dedicated guide: how to make WhatsApp Web look like iMessage. It's the most popular recreation we've written.

The iPhone look — this post — is the iOS system aesthetic. The soft grays you see in Settings. The layered card surfaces. The system blue. It's a calmer, more neutral look that doesn't shout "messaging app," and it's what most people actually mean when they say something "looks like an iPhone."

If you want blue bubbles, go to the iMessage guide. If you want WhatsApp Web to feel like it belongs on iOS, stay here.

The Honest Bit: Apple Doesn't Publish Hex Codes

Before the values, something most guides won't tell you.

Apple's colour system is semantic, not literal. Instead of "use this hex," Apple gives named, adaptive tokens — systemBlue, label, systemBackground, systemGray through systemGray6 — that shift automatically for light mode, dark mode, increased contrast, and vibrancy. Apple documents systemBlue as a colour that adapts to the current trait environment, and deliberately does not guarantee a hex value.

The famous #007AFF everyone quotes as "iOS blue"? Community-measured, not an Apple spec. It can differ between OS versions.

So the values below are the widely-measured light and dark defaults. They're accurate enough to build a convincing theme, and anyone telling you they're official specs is guessing. Design to the role — one blue for actions, a gray ramp for layering — and the exact digits matter less than the structure.

Step 1: Install the Extension

WhatsApp Web has no theming of its own. Everything below runs through WhatsApp Web Customizer — free, open source, about 30 seconds.

Step 2: The iOS Palette

Extension icon → Themes tab → Create.

Light (the iOS default)

Background: #FFFFFF — systemBackground
Sidebar: #F2F2F7 — systemGray6, the soft gray behind every Settings screen
Received bubbles: #FFFFFF — cards sit lighter than the surface behind them
Sent bubbles: #E5E5EA — systemGray5
Accent: #007AFF — systemBlue (community-measured)
Text: #000000 — label
Muted text: #8E8E93 — systemGray, for timestamps and secondary labels

Dark

Background: #000000 — iOS dark mode commits to true black
Sidebar: #1C1C1E — systemGray6 dark
Received bubbles: #2C2C2E — systemGray5 dark
Sent bubbles: #1C1C1E
Accent: #0A84FF — systemBlue dark, brighter to hold its own against black
Text: #FFFFFF
Muted text: #8E8E93

[⬇ Download iPhone-Light.json] (download slot)

[⬇ Download iPhone-Dark.json] (download slot)

Step 3: The Layering Rule (This Is the Whole Thing)

Here's what separates an actual iOS-looking interface from "white with a blue button."

iOS layers surfaces. In light mode, the background is gray and the content cards are white — cards float above the surface. In dark mode, it inverts: background is pure black, cards are lighter. Apple's gray ramp exists precisely to build that hierarchy, running from systemGray6 (most subtle) up to systemGray (most dominant).

Applied to WhatsApp Web: your sidebar should be #F2F2F7 and your chat window #FFFFFF. The chat area sits above the sidebar visually. Most people set both to white, get a flat page, and can't work out why it doesn't feel like iOS.

That single decision does more than the blue does.

Step 4: Use the Blue Almost Nowhere

iOS uses systemBlue to mean one thing: this is interactive. Links, buttons, active states. Nothing else is blue.

On WhatsApp Web that means: blue for the active chat and unread indicators, and nowhere else. No blue bubbles (that's the iMessage look — different post). No blue headers.

Restraint with the accent is a signature of the whole aesthetic. An interface with blue everywhere doesn't look like iOS; it looks like a website from 2012.

Step 5: The Font

Apple uses San Francisco. It isn't licensed for general use, but Inter is the closest free match and it's genuinely close — it was designed for the same job at the same sizes.

Extension icon → Typography tab → Inter. Push the size up one step; iOS body text is more generous than WhatsApp Web's default.

Step 6: Background — Solid, Always

iOS has no wallpaper behind Settings, behind Mail, behind Messages. The system surfaces are solid colour.

Backgrounds tab → solid #F2F2F7 (light) or #000000 (dark). No images, no patterns, no animation.

Step 7: Strip What iOS Wouldn't Show

iOS is ruthless about not showing you things you don't use. WhatsApp Web's sidebar has Archive, Status, Channels, and locked chats sitting there permanently.

Turn on Minimal Mode in the Display tab and they're gone. What's left is a clean list — much closer to how an iOS app presents itself.

A Note on Liquid Glass

If you've updated an Apple device recently, you've met Liquid Glass — the translucent material Apple introduced at WWDC25, described as reflecting and refracting its surroundings while dynamically transforming to bring focus to content. It's their biggest visual redesign in years and it spans iOS 26, iPadOS 26, and macOS Tahoe 26.

Honest answer: you can't reproduce it on WhatsApp Web. Liquid Glass is real-time refraction of whatever sits behind a surface. A theme sets colours; it can't compute optics. Anyone claiming a Chrome extension delivers Liquid Glass is selling you something.

What you can borrow is the principle underneath it — layered surfaces, content elevated above its background, restraint everywhere else. That's Step 3, and it's the part that actually reads as Apple. The glass is the finish; the layering is the structure.

Going Further

Build both variants. iOS switches by time of day; save light and dark and swap with one click.

Want the Messages app instead? The iMessage guide does blue bubbles properly.

Other Apple-adjacent looks: Things 3 shares the warm-light lineage.

The Bottom Line

The iPhone look is four things: a gray background with lighter content floating on it, one blue used almost nowhere, Inter at a generous size, and nothing else on screen.

Get the layering right — sidebar #F2F2F7, chat window #FFFFFF — and it reads as iOS before you've touched anything else. That's the move most guides miss.

👉 Install WhatsApp Web Customizer and build it. Nailed it? Share the JSON in our Discord.

For more: