Animated mesh gradient hero
A full-screen living mesh gradient with film grain and a floating wave headline. Loops forever in pure CSS.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
The smallest prompt of the set and the most striking: four blurred colour orbs wander across the screen, film grain adds texture, and the headline words ride a gentle wave. No JavaScript and no images.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.
Make a single HTML file with a full-screen animated mesh-gradient hero. Background #12091f. Inside a fixed layer (inset -20%, filter blur(60px) saturate(1.4)) place four radial-gradient circles, each about 60vmax wide: coral #ff5e7e, amber #ffb347, violet #6a5cff, teal #19d3c5. Animate each with its own transform keyframes (translate + scale, 11-16s, ease-in-out, infinite alternate) so the colours slowly mix and never repeat obviously. Add film grain: a fixed overlay using an inline SVG feTurbulence data URI, opacity .22, mix-blend-mode overlay. Centered content: small letter-spaced uppercase kicker "Studio Flux · 2026", a huge H1 (clamp 48-132px, weight 800, letter-spacing -0.05em, soft shadow) "Flow in every color" where each word is a span that bobs up and down 12px on a staggered wave animation, a 20px paragraph and a frosted glass pill link "Explore the work". Entrances: fade up with blur-in, staggered. System fonts, no external files, reduced-motion safe. Return only the complete HTML.
-
2
Animate them
Check: Different keyframes and durations so the mix keeps changing.
-
3
Add grain and content
Check: SVG noise overlay, kicker, wave headline and glass button.
Done when You can see it working in the browser.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.