Split Screen

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(98% 0.007 80)
--fg oklch(10% 0 0)
--muted oklch(50% 0 0)
--surface oklch(100% 0 0)
--surface-2 oklch(95% 0.005 80)
--border oklch(87% 0 0)
--accent oklch(56% 0.23 27)
--accent-fg oklch(99% 0 0)
--focus oklch(56% 0.23 27)

Token	Value
--font-body	`'Syne', system-ui, sans-serif`
--font-display	`'Syne', system-ui, sans-serif`
--font-mono	`ui-monospace, monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`0 1px 4px oklch(0% 0 0 / 0.08)`
--shadow-lg	`0 8px 32px oklch(0% 0 0 / 0.18)`

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');

:root {
	--bg: oklch(98% 0.007 80);
	--fg: oklch(10% 0 0);
	--muted: oklch(50% 0 0);
	--surface: oklch(100% 0 0);
	--surface-2: oklch(95% 0.005 80);
	--border: oklch(87% 0 0);
	--accent: oklch(56% 0.23 27);
	--accent-fg: oklch(99% 0 0);
	--focus: oklch(56% 0.23 27);
	--font-body: 'Syne', system-ui, sans-serif;
	--font-display: 'Syne', system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: 0 1px 4px oklch(0% 0 0 / 0.08);
	--shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.18);
}

Where it came from

Origin: Print editorial design; dual-narrative film techniques adapted to the web

Split-screen has roots in both film (parallel narratives) and editorial print spreads, and became common on the web once full-bleed images were trivial in CSS. They work especially well for A/B choices, login/signup panels, comparison pages, and hero sections with a strong visual on one side and copy on the other. The responsive challenge: at mobile widths, both panels must stack legibly, and neither should feel like the afterthought.

How to spot it

Viewport split at or near 50/50 with a hard or soft dividing edge
One side image or colour-heavy, one side text-heavy — visual tension across the line
Either both panels scroll together or one is fixed while the other scrolls
Divider line may be a colour change, a gap, or an overlapping element

Trade-offs

Strengths	Weaknesses
Creates immediate visual contrast and a strong first impression	Challenging to make both halves equally interesting at mobile widths
Good for binary choices, before/after comparisons, or login/signup	Feels forced if content does not naturally split into two equal parts
Memorable and structured — users remember it	Navigation and header integration require care — where does the header live?

In the wild

Dual login / create-account panels
Agency portfolio hero sections
A/B comparison product pages

Use it when

Login/signup, comparison, or binary-choice interfaces where two distinct options need equal visual weight from the first pixel.