webdevpuneet.com

Related Snippets

63 in Heroes category
55–60 of 60

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Gradient Mesh Hero

Product Hero

Gradient Mesh Hero — Free HTML CSS JS Snippet

Gradient Mesh Hero · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsText EffectsCSS AnimationLanding Page

Copy & paste

Source Code

<section class="hero">
  <div class="mesh"></div>
  <div class="mesh-2"></div>
  <div class="mesh-3"></div>

  <div class="content">
    <div class="eyebrow">Design System &amp; Components</div>

    <h1 class="headline">Beautiful interfaces<br>built for <span class="swap" id="swap">everyone</span></h1>

    <p class="sub">Copy-paste components that look great out of the box. No configuration, no opinion lock-in — just clean, production-ready code that works everywhere.</p>

    <div class="btns">
      <a href="#" class="btn-solid">Browse components</a>
      <a href="#" class="btn-outline">Read the docs</a>
    </div>

    <div class="stats">
      <div class="stat"><span class="stat-n">97+</span><span class="stat-l">Components</span></div>
      <div class="divider"></div>
      <div class="stat"><span class="stat-n">11</span><span class="stat-l">Categories</span></div>
      <div class="divider"></div>
      <div class="stat"><span class="stat-n">Free</span><span class="stat-l">Forever</span></div>
    </div>
  </div>

  <div class="scroll-hint">
    <div class="scroll-line"></div>
    <span>Scroll</span>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

3 CSS radial-gradient mesh blobs with filter: blur(80px) and drift animation
Drift keyframe: translate(x,y) + scale() with staggered delay and reverse direction
Shimmer gradient text: background-size:200% + background-position keyframe sweep
Word swap: setInterval fade-out/in via opacity + translateY transition
Scroll-down indicator: scaleY + opacity gradient line animation
Stats row with thin 1px divider separators
Dark #030712 background with mesh contained via overflow:hidden
GPU compositor animations — no layout or paint triggers

About this UI Snippet

Gradient Mesh Hero — Animated CSS Mesh Background, Shimmer Text & Cycling Word Swap

Screenshot of the Gradient Mesh Hero snippet rendered live

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.

Step by step

How to Use

  1. 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. 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. 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. 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. 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. 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.
Related: Before/After Hero with Comparison Slider
See the Before/After Hero with Comparison Slider for a related heroes pattern worth pairing with this one.
Related: Typed.js Multi-String Hero
See the Typed.js Multi-String Hero for a related heroes pattern worth pairing with this one.
Related: Hero with Voice Input Waveform Demo
See the Hero with Voice Input Waveform Demo for a related heroes pattern worth pairing with this one.

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.