Gradient Mesh Hero
A soft, fluid mesh of peach, pink, violet, cyan and yellow color fields flows and folds behind a crisp hero headline and buttons. Fine grain keeps it silky: the modern SaaS landing-page hero look.
Prompt · replace [TEXT]
Tool-agnosticDesign a modern landing-page hero around the word [TEXT]. The background is a full-bleed animated mesh gradient: five or six large, soft color fields (peach, hot pink, violet, sky cyan, butter yellow, a touch of mint) that drift, swirl and fold into each other continuously, with a faint diagonal sheen and very fine grain so the color never bands. On top, keep everything crisp: a slim navigation bar with a small round logo, three links and a dark pill button; a small translucent "new" announcement pill; [TEXT] as a huge near-black grotesque headline with tight tracking; a short gray subline and two buttons, one dark and one frosted white. Elements fade up in a quick stagger; the gradient never stops moving.
Visual DNA
- Large smooth color blobs blended into one continuously flowing mesh
- Gentle domain-warped folds and a soft diagonal sheen
- Fine animated grain that removes banding
- Crisp near-black headline in a grotesque with tight tracking
- Minimal hero chrome: nav, announcement pill, subline, two buttons
- Category
- Sci-fi UI & Modern Web
- Demo built with
- WebGL
- Energy
- Calm
- Background
- Light bg
Also known as
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy