Home / Snippets / Color & Theming /
Dark mode hero
A tight above-the-fold strip: eyebrow, display title, one-line value prop, and two actions — on layered oklch glows (no bitmap hero art).
Now available
Ship dark UI without muddy grays
Token-backed surfaces, predictable focus, and gradients that stay in gamut — tuned for dashboards and docs.
Quick implementation
.dark-mode-card {
background:
radial-gradient(ellipse 80% 60% at 20% 20%, oklch(0.42 0.14 280 / 0.35), transparent 55%),
linear-gradient(165deg, oklch(0.18 0.04 265), oklch(0.12 0.03 270));
border-radius: var(--radius-lg);
}
.dm-hero__btn--primary {
background: linear-gradient(180deg, oklch(0.55 0.16 265), oklch(0.42 0.14 270));
color: oklch(0.99 0.01 265);
}Prompt this to your LLM
Mesh, typography scale, and CTA hierarchy.
You are building a compact hero for a dark SaaS landing page.
Goal: Eyebrow label, H1-sized title, supporting sentence, primary + secondary CTAs.
Technical constraints:
- Background uses layered radial + linear gradients in oklch() — no image assets.
- CTAs are anchor tags styled as buttons; include :focus-visible rings.
- Keep copy column max-width readable (~26rem); avoid full-bleed text on wide demos.
Return HTML + CSS.Why this matters in 2026
Hero sections set chroma expectations for the whole product. Mesh gradients in oklch keep shifts smooth when you tweak brand hue globally.
The logic
Primary CTA uses a short vertical gradient; secondary is a translucent panel so it still reads on busy backgrounds. A light top sheen (::after) separates content from the glow.
Accessibility & performance
Headline uses h2 in the demo (page already has h1). Links are real <a href> for keyboard and screen reader semantics. No backdrop-filter — paint stays predictable.