You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewGlass Footer — Free HTML CSS Glassmorphism Footer Snippet
Glass Footer · Footers · Plain HTML & CSS · Live preview
What's included
Features
About this UI Snippet
Glass Footer — A Frosted Panel That Needs Something Behind It
Glassmorphism only reads as glass when there's something worth blurring behind it — a flat, single-colour page background makes the effect invisible. This snippet pairs the frosted panel with the colourful, multi-blob gradient backdrop it needs, and floats the footer as a distinct rounded card rather than a full-width bar, which is what separates a genuine glass panel from a page section that merely has some transparency applied to it.
Three ingredients, one on the panel
The recipe is the same three CSS declarations behind every glass effect: background: rgba(255,255,255,0.1) for the translucent tint, backdrop-filter: blur(18px) (with the -webkit- prefix for Safari) to blur whatever sits behind the panel, and border: 1px solid rgba(255,255,255,0.22) to trace a faint, light-catching edge. All three live together on .glf-panel; remove any one and the "frosted" read collapses — background alone with no blur looks like a plain semi-transparent box, and blur with no border looks like it's floating with no defined edge.
The backdrop is not decoration — it's the point
.glf-backdrop is three overlapping radial-gradients at different screen positions and colours (indigo, pink, cyan) over a dark base, covering the entire page behind the content. Without genuine colour and contrast variation behind the panel, backdrop-filter has nothing meaningful to blur and the glass effect simply won't be visible — this is the single most common reason a glassmorphism component looks broken when someone copies just the panel CSS without also copying something colourful to sit behind it.
A footer that floats, rather than one that spans
Unlike a conventional edge-to-edge footer bar, .glf-panel is capped at max-width: 900px, centred, and fully rounded — a discrete card resting on the page rather than a strip that touches both edges of the viewport. That choice is deliberate: a full-bleed glass panel loses the sense of "an object floating in front of the background" that makes the effect convincing, because there's no visible backdrop at its edges to contrast against.
A real fallback for browsers without `backdrop-filter`
@supports not (backdrop-filter: blur(1px)) swaps the panel to a solid, opaque dark background for the small minority of browsers that don't support the filter. Without this, unsupported browsers would render a nearly-invisible, low-contrast panel with barely-readable light text over a bright gradient — worse than no glass effect at all. @supports is the correct progressive-enhancement tool here rather than a JavaScript feature-detection library, since it's a pure CSS query the browser resolves itself.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain, property by property, why removing the background tint, the blur, or the border each individually breaks the glass illusion in a different way — that's the fastest way to actually internalise the technique rather than treating it as a copy-paste recipe. It's also worth asking the assistant to audit text contrast: light, semi-transparent text over a variable, colourful backdrop is exactly the kind of case that can fail WCAG contrast checks depending on which part of the gradient sits behind a given word. For extending it, ask for a version where the backdrop gradient subtly animates (reusing the drift technique from an aurora background), or one that swaps to the @supports fallback background automatically based on a JavaScript feature-detection check instead of relying on the CSS query alone.
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:
Build a "glassmorphism" website footer in plain HTML and CSS — no JavaScript, no image assets.
Requirements:
- A full-page absolutely positioned backdrop layer behind everything, built from three or more overlapping radial-gradient blobs in different saturated colours (e.g. indigo, pink, cyan) at different positions, over a dark base colour — this backdrop must have real colour and contrast variation for the glass effect to be visible at all.
- A footer containing a single centred, rounded, max-width panel (not a full-width bar) styled with the complete glassmorphism recipe: a low-opacity white background (around rgba(255,255,255,0.1)), backdrop-filter: blur(18px) with the -webkit- prefix for Safari, and a faint semi-transparent white border (around 1px, 20% opacity) to catch the light.
- Inside the panel, include a brand name, a small set of link columns with headings, a bottom row with a copyright string, and two social icon links — all styled in white/light text and icons with reduced opacity for hierarchy, since they sit against a variable-colour backdrop.
- Add an @supports not (backdrop-filter: blur(1px)) fallback that swaps the panel to a solid, opaque dark background for browsers that do not support the filter, keeping text legible.
- Make the panel's internal layout responsive: link columns and the bottom row should stack cleanly on narrow screens.
- Add a border-radius large enough (18-20px) that the panel reads as a distinct floating card resting on the backdrop.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML and CSSA gradient backdrop renders behind a frosted-glass footer panel — no JavaScript is used.
- 2Replace the backdropSwap the radial-gradient blobs in .glf-backdrop for a photo, a different gradient, or your existing page background — the panel needs contrast and colour behind it to read as glass.
- 3Tune the blur and tintAdjust blur(18px) for a sharper or softer frost, and the 0.1 alpha on the panel background for a more or less opaque glass.
- 4Update the footer contentReplace the brand, link columns, socials, and copyright with your own.
- 5Verify the fallbackCheck the @supports block renders a legible, opaque panel in browsers without backdrop-filter support.
- 6Export in your formatClick HTML, JSX, or Tailwind to download the version you need.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
backdrop-filter: blur() blurs whatever is directly behind the element — on a flat single-colour background, there is nothing with enough contrast or colour variation to blur, so the panel just looks like a plain semi-transparent box. The gradient backdrop in this snippet is not decoration; it is required for the effect to read as glass at all.
An @supports not (backdrop-filter: blur(1px)) query swaps the panel to a solid, opaque dark background instead, keeping the light-coloured text readable. Without this fallback, unsupported browsers would render a barely-visible, low-contrast panel over the bright gradient.
A discrete, max-width panel with visible backdrop around its edges reads as an object genuinely floating in front of the background. A full-bleed glass bar touching both edges of the viewport loses that contrast at its border and looks flatter.
Yes — replace .glf-backdrop's background with any image (via background-image or an <img> positioned behind the content). Photos with real colour and luminance variation often produce an even more convincing glass effect than gradients.
It is more expensive than a plain background colour since the browser has to continuously sample and blur the layer(s) behind the element, but it is GPU-accelerated in modern browsers and fine for a single footer panel. Avoid stacking many overlapping blurred panels on one page if performance on lower-end devices matters.
Click JSX, Vue, or Angular to download the converted component. Since there is no JavaScript behaviour, the conversion is a direct markup and class-name translation with no state or lifecycle hooks required.