Translucent Layers

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(22% 0.06 42)
--fg oklch(96% 0.01 50)
--muted oklch(78% 0.035 50)
--surface oklch(100% 0 0 / 0.12)
--surface-2 oklch(100% 0 0 / 0.2)
--border oklch(100% 0 0 / 0.18)
--accent oklch(80% 0.2 55)
--accent-fg oklch(18% 0.06 42)
--focus oklch(80% 0.2 55)

Token	Value
--font-body	`'Outfit', system-ui, sans-serif`
--font-display	`'Outfit', system-ui, sans-serif`
--radius	`16px`
--radius-sm	`10px`
--shadow	`0 4px 16px oklch(12% 0.05 42 / 0.5)`
--shadow-lg	`0 20px 60px oklch(12% 0.05 42 / 0.7)`

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

:root {
	--bg: oklch(22% 0.06 42);
	--fg: oklch(96% 0.01 50);
	--muted: oklch(78% 0.035 50);
	--surface: oklch(100% 0 0 / 0.12);
	--surface-2: oklch(100% 0 0 / 0.2);
	--border: oklch(100% 0 0 / 0.18);
	--accent: oklch(80% 0.2 55);
	--accent-fg: oklch(18% 0.06 42);
	--focus: oklch(80% 0.2 55);
	--font-body: 'Outfit', system-ui, sans-serif;
	--font-display: 'Outfit', system-ui, sans-serif;
	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 4px 16px oklch(12% 0.05 42 / 0.5);
	--shadow-lg: 0 20px 60px oklch(12% 0.05 42 / 0.7);
}

Where it came from

Origin: Material Design's z-axis elevation model; print acetate overlay design

While glassmorphism uses a single blurred panel, translucent-layers design is about explicit stacking: surfaces at different opacity levels modify the colour of everything beneath. It draws from print design's acetate overlay tradition and Material Design's elevation system. The effect creates depth and richness without the blur cost of full glassmorphism — each layer is a tint, not a filter.

How to spot it

Surfaces at different opacity levels — each adds a tint to what it covers
Colour blending where layers overlap creates new intermediate tones
Strong z-axis sense: a clear above/below hierarchy visible in the colour
Often warm or cool tinted rather than purely neutral or white

Trade-offs

Strengths	Weaknesses
Creates rich visual depth without blur performance cost	Risk of muddy colours where too many layers overlap
Versatile — can be applied subtly or dramatically	Requires careful colour selection so overlaps read intentionally
Colour blending can create visually interesting intersections	Clarity decreases with each additional layer

In the wild

Material Design elevation experiment pages
Print-inspired editorial web layouts
Some analytics dashboard designs with panel layering

Use it when

Interfaces with a clear z-axis hierarchy where you want depth to read visually without the GPU cost of blur.