webdevpuneet.com

Related Snippets

63 in Heroes category
27–32 of 60

Hero with Floating Glassmorphic Cards

App Hero with Phone Mockup and Store Badges

Hero with Video Testimonial Player

Hero Framed as Us vs. Them

Newsletter Hero with Benefit Checklist

Hero with Mouse-Parallax Layers

Hero with Floating Glassmorphic Cards — Free HTML CSS Snippet

Hero with Floating Glassmorphic Cards · Heroes · Plain HTML & CSS · Live preview

CategoryHeroes
TagsGlassmorphismText EffectsCSS AnimationCSS OnlyLanding Page

Copy & paste

Source Code

<section class="gcf-hero">
  <div class="gcf-blob gcf-blob1"></div>
  <div class="gcf-blob gcf-blob2"></div>
  <div class="gcf-blob gcf-blob3"></div>

  <div class="gcf-inner">
    <span class="gcf-badge">Design system, reimagined</span>
    <h1 class="gcf-title">Interfaces that feel <span>weightless.</span></h1>
    <p class="gcf-sub">A component library built around depth, light, and motion — so every screen you ship looks like it's floating above the page.</p>
    <div class="gcf-cta-row">
      <a href="#" class="gcf-btn-primary">Start building</a>
      <a href="#" class="gcf-btn-secondary">View components</a>
    </div>
  </div>

  <div class="gcf-card gcf-card1">
    <div class="gcf-card-icon">☀</div>
    <strong>Live weather</strong>
    <small>72°F · Clear skies</small>
  </div>
  <div class="gcf-card gcf-card2">
    <div class="gcf-card-icon">♪</div>
    <strong>Now playing</strong>
    <small>Ambient — Drift Vol. 2</small>
  </div>
  <div class="gcf-card gcf-card3">
    <div class="gcf-card-icon">✓</div>
    <strong>Focus session</strong>
    <small>25:00 remaining</small>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), 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

Independently timed float
Each card oscillates on its own duration and amplitude so nothing syncs up.
True frosted glass
backdrop-filter: blur plus translucent background makes content behind cards visibly distort.
Animated blob backdrop
Three blurred gradient circles drift and scale slowly to keep the scene alive.
Gradient headline text
background-clip: text paints a gradient through the emphasized word.
Glass CTA button
The secondary button reuses the frosted-glass treatment for visual consistency.
Purposeful card content
Cards show plausible mini-widgets instead of empty shapes.
Pure CSS animation
No JavaScript, no canvas — every motion is a CSS keyframe.
Responsive fallback
Cards hide below 900px to protect headline readability.

About this UI Snippet

Hero with Floating Glassmorphic Cards — Frosted Panels Drifting Over an Animated Blob Backdrop

Screenshot of the Hero with Floating Glassmorphic Cards snippet rendered live

Glassmorphism reads as flat and lifeless the moment every frosted panel sits perfectly still. This hero fixes that with three floating glass cards drifting gently at different speeds and offsets over a slowly moving gradient-blob backdrop — pure HTML and CSS, no JavaScript, no canvas.

The blob backdrop

Three large, heavily blurred radial-gradient circles (.gcf-blob1/2/3) sit behind the content, each with its own drift keyframe animation moving it a short distance and gently scaling it up and down over 14–20 seconds. Because the durations differ and one runs in reverse, the blobs never fall into a synchronized rhythm — the backdrop keeps subtly reshaping itself instead of visibly looping. filter: blur(60px) turns hard-edged circles into soft, colorful light without a single image asset.

Frosted glass, done properly

Each .gcf-card uses background: rgba(255,255,255,0.1) plus backdrop-filter: blur(16px) (with the -webkit- prefix for Safari) and a faint border — the combination that makes glassmorphism actually read as glass rather than a semi-transparent box. Content sitting behind the card visibly blurs through it, so the moving blobs are essential set dressing, not decoration: without something behind the cards to distort, the blur effect is invisible.

Independent float timing is the whole trick

The three cards each get a distinct translateY oscillation keyframe (gcfFloat1/2/3) at different durations (6s, 7.5s, 5.2s) and different amplitudes and directions. This is the detail that separates a convincing "floating in space" effect from an obviously synced, robotic one — in real fluid dynamics nothing this size moves in perfect unison, and neither should these cards. Keep each card's duration and offset distinct any time you add more.

Cards with a purpose, not just shapes

Rather than empty frosted rectangles, each card shows a small piece of plausible live data — a weather reading, a now-playing track, a focus-timer countdown — reinforcing the "ambient interface" positioning of the hero's copy. Swap these for whatever mini-widgets are relevant to your product.

Customizing it

Change the blob and gradient-text colors to your palette — the gradient text on the emphasized headline word reuses the background-clip: text technique from other heroes in this library. Add or remove floating cards, keeping each one's float keyframe duration and direction distinct. On narrow screens the cards hide by default since there usually isn't room for them without crowding the headline — reposition rather than hide if your layout has space.

Step by step

How to Use

  1. 1
    Paste the HTML and CSSA dark hero renders with drifting gradient blobs and three floating glass cards.
  2. 2
    Watch the blobs and cards moveEach blob and each card runs its own independent animation timing, so nothing moves in sync.
  3. 3
    Resize below 900pxThe floating cards hide to keep the headline readable on small screens.
  4. 4
    Edit the card contentChange the icon, title, and detail text in each .gcf-card to match your product.
  5. 5
    Retheme the colorsSwap the blob gradients and the headline's gradient-text colors for your brand.
  6. 6
    Add more cardsGive each new card its own float keyframe with a distinct duration and direction.

Real-world uses

Common Use Cases

Design system homepages
Showcase a component library with three frosted cards floating at different depths, each on its own duration and amplitude.
Productivity and ambient apps
Pair floating mini panels with a drifting blob backdrop, keeping glass from looking flat and lifeless.
Creative agency sites
Use as a distinctive opener for a creative agency, with backdrop-filter: blur over translucent backgrounds making genuine frosted glass.
AI and generative launches
Convey a floating, weightless feel with three blurred gradient circles that drift and scale slowly behind the cards.
Wellness and lifestyle apps
Swap card content for mood or routine summaries, with a gradient headline painted through background-clip: text, and compare with a gradient mesh hero.
Related: Product Launch Countdown Hero
See the Product Launch Countdown Hero for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

backdrop-filter: blur only has a visible effect on whatever is actually behind the element. Without the animated gradient blobs, the frosted cards would look like plain semi-transparent boxes with no distortion to reveal. The blobs are essential set dressing for the glass effect to read as glass.

If every card floated on the same timing, they'd rise and fall in perfect unison, which reads as an obviously mechanical loop. Distinct durations (6s, 7.5s, 5.2s), amplitudes, and directions mean the cards drift independently, the way objects of different size and weight would in real fluid motion, and the scene never looks like a repeating cycle at a glance.

It's supported in all current major browsers, but Safari historically needed the -webkit-backdrop-filter prefix, which this snippet includes. If you need to support very old browsers without backdrop-filter support, the cards fall back to a plain translucent background — still readable, just without the blur-through effect.

Duplicate a .gcf-card element with a new position (top/left/right/bottom) and add a new @keyframes rule with a distinct name, duration, and translateY range, then reference it in that card's animation property. Keep the timing different from the existing three cards to preserve the unsynced feel.

Since there's no JavaScript, this is a direct markup and CSS conversion — click JSX, Vue, or Angular in the export panel. The keyframe animations and backdrop-filter properties carry over unchanged as they're pure CSS.