AI SaaS Gradient

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 15 tokens

--bg oklch(14% 0.04 275)
--fg oklch(97% 0.005 275)
--muted oklch(70% 0.04 275)
--surface oklch(100% 0 0 / 0.06)
--surface-2 oklch(100% 0 0 / 0.1)
--border oklch(100% 0 0 / 0.14)
--accent oklch(78% 0.14 280)
--accent-fg oklch(14% 0.04 275)
--focus oklch(80% 0.16 200)

Token	Value
--font-body	`'Inter', system-ui, sans-serif`
--font-display	`'Inter', system-ui, sans-serif`
--radius	`12px`
--radius-sm	`8px`
--shadow	`0 4px 24px oklch(0% 0 0 / 0.3)`
--shadow-lg	`0 16px 48px oklch(0% 0 0 / 0.5)`

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

:root {
	--bg: oklch(14% 0.04 275);
	--fg: oklch(97% 0.005 275);
	--muted: oklch(70% 0.04 275);
	--surface: oklch(100% 0 0 / 0.06);
	--surface-2: oklch(100% 0 0 / 0.1);
	--border: oklch(100% 0 0 / 0.14);
	--accent: oklch(78% 0.14 280);
	--accent-fg: oklch(14% 0.04 275);
	--focus: oklch(80% 0.16 200);
	--font-body: 'Inter', system-ui, sans-serif;
	--font-display: 'Inter', system-ui, sans-serif;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 4px 24px oklch(0% 0 0 / 0.3);
	--shadow-lg: 0 16px 48px oklch(0% 0 0 / 0.5);
}

Where it came from

Origin: AI product landing pages, Dribbble SaaS template culture

The AI product wave of the early 2020s produced a strikingly uniform visual language: deep indigo or near-black backgrounds, large blurred radial gradients bleeding from purple through blue to cyan, and white sans-serif text. Every new AI startup landing page looked like the previous one. Tailwind UI and Framer templates made the components easy to copy, cementing it as the de-facto SaaS look of the early 2020s.

How to spot it

Dark indigo or near-black background
Purple and cyan mesh gradient glow effects
Glowing card borders and orb decorations
Clean white sans-serif, generous spacing

Trade-offs

Strengths	Weaknesses
Instantly readable as "technology product"	Completely saturated — indistinguishable from competitors
Dark surfaces reduce eye strain in extended use	Decorative orbs add no information
Looks polished with minimal effort	Will date as rapidly as any trend

In the wild

Linear, Vercel, and Resend marketing pages
Most AI tool landing pages, 2022–present
Countless Framer and Webflow template UIs

Use it when

When you need to signal "AI/SaaS" immediately and differentiation is not the priority.