Glass Mesh Card
Colourful animated mesh of five blurred radial gradients topped by a glassmorphism card — backdrop-filter, semi-transparent fill and pearlescent border.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The mesh background is built from five radial-gradient layers stacked inside a single .glass-mesh-bg element. Each gradient anchors a vivid colour at a fixed position (20% 30%, 80% 25%, 50% 80%…) and fades to transparent over 45–50% of its radius. Layering five semi-transparent blobs produces an organic colour patch with no sharp edges.
A filter: blur(25px) melts the stack into a soft, glowing spread. The element overflows its parent via inset: -30% so blurring never exposes white edges at the corners — the wrapper's overflow: hidden clips the excess cleanly.
The CSS animation glassMeshAnim (10 s, ease-in-out, alternate infinite) translates, rotates and gently scales the background beneath the card. The alternate direction reverses the motion at each cycle — no visible jump, no abrupt loop.
The .glass-mesh-card applies backdrop-filter: blur(20px) to blur the coloured layer showing through behind it. Its rgba(255, 255, 255, .08) fill and rgba(255, 255, 255, .15) border deliver the frosted-glass look of glassmorphism, deepened by a box-shadow that amplifies perceived depth.
Accessibility
- prefers-reduced-motion: not implemented in the source code — the CSS animation runs regardless of the system preference. Add
@media (prefers-reduced-motion: reduce) { .glass-mesh-bg { animation: none; } }when integrating. - Text inside
.glass-mesh-card(<h3>and<p>) is standard semantic HTML, fully readable by screen readers without any extra layer. - White text contrast on the glassmorphic card: ratio ≥ 7:1 against a dark background (
#0a0a0f, WCAG AAA). On lighter backgrounds, verify contrast after glassmorphism depending on the integration context. - The structure uses an
<h3>: adjust the heading level (<h2>,<h4>…) to match the target page outline. - No keyboard interaction in the base code — the effect is purely decorative. Interactive elements added inside the card (buttons, links) must manage their own
:focus-visible.
Browser compatibility
Requires backdrop-filter and CSS animations — supported in all modern browsers. No external dependency, zero JavaScript.
Without <code>backdrop-filter</code> (Firefox < 103 without a flag), the card keeps its semi-transparent fill but without blur — text remains legible and the animated colour mesh is unaffected.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="glass-mesh-wrapper">
<div class="glass-mesh-bg"></div>
<div class="glass-mesh-card">
<div class="glass-dots">
<div class="glass-dot"></div>
<div class="glass-dot"></div>
<div class="glass-dot"></div>
</div>
<h3>Card title</h3>
<p>Card description or content</p>
</div>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| mesh colours | Pink, cyan, orange, green, violet | Replace the five rgba(…) values in the background of .glass-mesh-bg — each colour anchors one pole of the animated patch. |
| filter: blur() on .glass-mesh-bg | 25px | Increase (≥ 35 px) to blend colours more, decrease (≤ 12 px) for sharper, more saturated zones. |
| animation-duration on .glass-mesh-bg | 10s | Duration of one half-cycle. 6–8 s = dynamic feel, 14–20 s = almost imperceptible drift. |
| inset on .glass-mesh-bg | -30% | Overflow beyond the container. Increase if blurring exposes white edges at the corners. |
| backdrop-filter on .glass-mesh-card | blur(20px) | Frosted-glass blur. blur(10px) = translucent glass, blur(32px) = near-opaque frosted pane. |
| background on .glass-mesh-card | rgba(255,255,255,.08) | White fill opacity. 0 = fully transparent, 0.18–0.25 = more opaque glass, easier to read on saturated backgrounds. |
| border on .glass-mesh-card | 1px solid rgba(255,255,255,.15) | Colour and opacity of the pearlescent border. Raise alpha (0.3–0.5) for a visible rim, or tint the colour for coloured glass. |
FAQ
.glass-mesh-wrapper is self-contained. Copy the HTML block as many times as needed. The glassMeshAnim keyframe is defined once in CSS and shared by all instances without conflict. Differentiate cards by overriding the background of each .glass-mesh-bg via an inline style attribute or a utility class.backdrop-filter: blur() is GPU-accelerated on modern Chrome, Edge and Safari — the impact is negligible on a single element. Avoid stacking three levels of backdrop-filter or applying it to an element covering more than 50% of the screen. On Firefox < 103, it is silently ignored (fallback without blur, text still readable).@media (prefers-reduced-motion: reduce) { .glass-mesh-bg { animation: none; } } to your stylesheet — the effect does not include this natively. For programmatic control: document.querySelector('.glass-mesh-bg').style.animationPlayState = 'paused'.
