About Mesh Gradient
The early-2020s SaaS hero: huge, soft blobs of violet, magenta, sky-cyan and amber melting into one another behind a bold sans headline. Stripe set it moving with a WebGL gradient around 2019; Vercel, Linear and a wave of developer tools then dropped it onto a near-black base.
This system keeps that recipe intact — a glowing mesh, frosted-glass cards with a 1px white hairline, one monospace "builder" word, and a calm 12-column layout underneath.
- Origin
- Global, led by San Francisco and remote-first SaaS companies
- Era
- 2019–2022; Stripe's WebGL gradient ~2019–2020, glassmorphism named Nov 2020, dark-base gradient heroes peak 2021
- Key figures
- Michal Malewicz · Kevin Hufnagl · Stripe design team · Linear web team
- Movements
- SaaS marketing design · Glassmorphism · WebGL hero backgrounds
Mesh Gradient design spec
Colors
Background
Surface
Primary
Secondary
Accent
Text
Typography
Hanken GroteskHeadings
InterBody
JetBrains MonoMono
Unlock for 1 credit
The other 11 sections — buttons, cards, spacing, motion, techniques and more — open once you unlock. Download the DESIGN.md or send it to your AI in one click. Unlock once, yours forever.
Sign up nowHave an account? Sign in
Styles similar to Mesh Gradient
Also inspired by design movements, with a close feel.
Holographic UI 2040Information made of light. Deep-space black, ultra-light Inter and prismatic glass edges.
Titanium Product DesignMachined to the micron. Brushed grade-5 titanium on graphite, monospace specs, dimensioned callouts.
TidalpunkHope glows underwater. Deep teal glass, tidal cyan light, and kelp-green currents.
Architectural BlueprintMeasurement, not mood. Prussian cyan grid with white hairlines and vermillion revision marks.