The mesh gradient hero is the most popular aesthetic on modern product landing pages — a dark background with large blurred radial-gradient colour blobs that drift slowly, creating an ambient painted background effect. This snippet gives you a complete implementation with three animated mesh blobs, a shimmer gradient headline, a cycling word swap animation, a stats row, and a scroll-down indicator — all in plain HTML, CSS, and minimal JavaScript.

How the CSS mesh gradient works

Three absolutely positioned div elements (.mesh, .mesh-2, .mesh-3) each have a radial-gradient background in different colours (indigo, pink, cyan) and filter: blur(80px) to create the soft, painterly blob effect. They use position: absolute and overflow: hidden on the parent to stay contained. A CSS @keyframes animation (drift) moves each blob by translate(x,y) and scale() on a different delay and direction — so they move independently and never look static. The blur is handled on the GPU compositor.

The shimmer gradient headline

The .swap span has background: linear-gradient(90deg, purple, pink, orange) with background-size: 200%. A @keyframes animation shifts background-position from 0% to 200%, causing the gradient to sweep continuously across the text — a smooth shimmer effect that runs indefinitely.

The word swap animation

A setInterval cycles through ["everyone", "developers", "designers", "startups", "teams"] every 2.8 seconds. On each tick, the element fades out via opacity: 0 and translateY(8px), then the text changes and fades back in. This pattern cycles through audience segments to communicate broad relevance without a long copy list.

The scroll-down indicator

A vertical gradient line animates via scaleY and opacity to suggest downward scroll. The line uses background: linear-gradient(to bottom, transparent, indigo) for a natural fade-in from nothing. Letter-spaced uppercase "Scroll" label below reinforces the affordance.

The stats row

Three stats (97+ components, 11 categories, Free) separated by thin 1px dividers communicate scale and value proposition at a glance. Update with your own product metrics.

Performance and accessibility

All three mesh blob animations use CSS transform — GPU compositor only, no layout recalculation triggered. The shimmer gradient text animation uses background-position — also compositor-safe. For users who prefer reduced motion, add @media (prefers-reduced-motion: reduce) { .mesh, .mesh-2, .mesh-3 { animation: none; } .swap { animation: none; } } to freeze the blobs and shimmer without removing the visual design. The word swap setInterval should also be gated: check window.matchMedia("(prefers-reduced-motion: reduce)").matches before calling setInterval.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of manually tracing how three blurred blobs never look synchronized, hand this snippet's HTML, CSS, and JS to an AI coding assistant like Claude and ask it to explain why staggering each mesh div's drift animation-delay and flipping animation-direction to reverse on one of them is what keeps the background from ever repeating a visible pattern. The same assistant can help optimize it — ask whether three large blurred, animated divs are cheap enough on low-end mobile GPUs, or whether the word-swap setInterval should be paused when the tab is backgrounded using the Page Visibility API. It's also a fast way to extend the hero: ask it to make the mesh blobs follow the cursor slightly for a parallax feel, add a fourth blob with its own color and timing, or gate the whole animation set behind a prefers-reduced-motion media query with a graceful static fallback. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an animated gradient mesh hero section in plain HTML, CSS, and minimal JavaScript, no canvas, no libraries.

Requirements:
- Three or more absolutely positioned, large circular divs, each with a different radial-gradient background fading to transparent, each with filter: blur(80px), contained inside a hero section with overflow: hidden so nothing bleeds past the viewport.
- One shared drift keyframe animation that moves each blob with transform: translate(x, y) scale(s) through at least three keyframe stops, applied to every blob but with a different animation-delay (using negative values so they start mid-cycle) and at least one blob using animation-direction: reverse, so the blobs never move in visible unison.
- A headline where part of the text uses a linear-gradient background with background-size around 200%, background-clip: text and transparent text fill, animated by shifting background-position across a keyframe loop to create a continuous color shimmer.
- A JavaScript-driven word-swap: an array of words cycled by setInterval, where each tick fades the current word out (opacity 0, translateY offset) via a CSS transition, swaps the textContent after the transition duration with setTimeout, then fades the new word back in.
- A scroll-down indicator built from a short vertical gradient line that pulses opacity and scaleY on an infinite keyframe animation.
- A stats row with thin 1px divider elements between each stat, and primary and outline call-to-action buttons below the headline.

Step by step

How to Use

1
Click play and watch the mesh animationThree gradient blobs drift independently using the drift @keyframes with different animation-delay and direction values. The shimmer text and word swap also run automatically on load.
2
Change the mesh blob coloursIn the CSS panel, update the rgba colours in .mesh, .mesh-2, and .mesh-3 background radial-gradient values. Use rgba() with low opacity (0.3–0.5) so blobs blend smoothly without overpowering the text.
3
Update the cycling wordsIn the JS panel, edit the words array: ["everyone", "developers", ...]. Add or remove audience segments. Change the 2800ms interval to control swap speed.
4
Update the headline and statsEdit the static part of the headline in the HTML h1. Update the .stat-n values to your real component count, category count, or other product metrics.
5
Adjust the mesh speed and sizeIn the CSS, change animation-duration on .mesh (default 18s) to speed up or slow down the drift. Reduce width/height on each .mesh element for smaller, tighter blobs. Increase filter: blur() for softer, more diffuse blobs.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with useEffect for the word swap interval and cleanup, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

SaaS product and developer tool landing page hero

The mesh gradient aesthetic is the dominant visual style on modern developer tool and SaaS landing pages. The dark background and coloured blobs signal technical sophistication while the cycling word swap demonstrates broad audience relevance in a small space.

Design system, component library, and UI kit homepages

The stats row (97+ components, 11 categories, Free) maps directly to a component library homepage. The "Browse components" CTA drives users into the library. Adapt the stats to your own library counts and update the eyebrow label.

Creative agency and portfolio hero sections

The animated mesh background creates an immersive, premium feel suitable for creative agencies (see the editorial agency hero), design studios, and freelancer portfolios. Replace the headline with your positioning statement and the stats with years of experience, completed projects, and happy clients.

Open source project and GitHub Pages landing pages

The dark aesthetic and technical framing work perfectly for open source library landing pages. The word swap can cycle through use cases ("for React", "for Vue", "for Svelte"). The "Read the docs" CTA links to your documentation site.

Learn CSS mesh gradient and shimmer animation techniques

The mesh gradient demonstrates how radial-gradient + blur + animation creates a complex painted background from simple CSS. The shimmer text shows how background-size: 200% and animated background-position create continuous motion without keyframe colour changes.

Waitlist and coming-soon pages with visual polish

A mesh gradient background communicates design quality even before the product is built. Use the hero for a coming-soon page: replace the CTA with an email capture form (see Product Hero in this category), keep the mesh animation, and remove the stats row until launch.

Got questions?

Frequently Asked Questions

Three div elements are positioned absolutely inside the hero. Each has a radial-gradient background in a different colour with filter: blur(80px) applied — the blur creates the soft, diffuse blob shape. A CSS @keyframes animation moves each blob via transform: translate() and scale() on different durations (18s), delays (-6s, -12s), and directions (normal, reverse). Because they move at different rates and in different directions, they never synchronise and always look organic. Crucially, transforms run on the GPU compositor and do not trigger layout recalculation.

Copy one of the .mesh div elements in the HTML and add a .mesh-4 class. In the CSS, add .mesh-4 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(234,179,8,0.3), transparent 70%); top: 20%; right: 20%; animation-delay: -9s; } — adjust the position, size, and colour to fill any empty area. Multiple overlapping blobs with mix-blend-mode: screen (if you add it) would blend colours additively.

setInterval fires every 2800ms. On each tick, it applies opacity: 0 and transform: translateY(8px) via inline style with transition to fade the element out and slide it down. After 320ms (the transition duration), a setTimeout fires, changes el.textContent to the next word in the array, then immediately sets opacity: 1 and transform: translateY(0) to fade back in. The result is a clean fade-swap with a slight upward slide that signals the text has changed.

Yes. Click "JSX" to download. In React, manage the word swap in a useEffect with a setInterval. Return a cleanup function that calls clearInterval() to prevent memory leaks when the component unmounts: useEffect(() => { const id = setInterval(() => { ... }, 2800); return () => clearInterval(id); }, []). In Next.js App Router, add "use client" since the component uses useEffect. The CSS mesh animations are purely CSS and work unchanged in any framework.

Loading…