Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
CardsFree

Glassmorphism

Pure CSS frosted glass: backdrop-filter blur over a semi-transparent fill, diagonal glare via ::before, and layered drop shadow — zero JavaScript.

CSSGlassModern
Glass
Hover or click the scene to interact

This effect is free — the Cards category contains 41 effects total, including 6 free. Effect.Labs has 811 vanilla effects. Explore the category →

View in catalogue Free account

Usage examples

① Floating navigation — Frosted glass menu bar on gradient background

WhenWhen a fixed or sticky header must stay readable while letting the hero color or a scrolling background image show through.
WhyBlur dynamically filters content moving behind the bar — the glass effect peaks on vivid, live backgrounds. The frosted edge adds depth without masking the hero image.
Settingsblur(16px) for a lighter feel, rgba(255,255,255,0.08) fill, border-radius: 0 on the nav for straight edges.

② KPI card — Dark analytics dashboard

WhenIn a dark dashboard with color accent spots in the background, when metric cards must stay readable while reflecting the surrounding visual atmosphere.
WhyThe transparency hints at neighboring background colors, creating natural visual cohesion without graphic overload. The top-left diagonal glare reinforces the sense of depth.
Settingsblur(20px), fill rgba(255,255,255,0.05), box-shadow rgba(0,0,0,0.4) 0 8px 32px, border at rgba(255,255,255,0.08).

End-to-end encryption

Your data is encrypted before leaving your device. Nobody — not even us — can read it.

③ Feature card — Dark marketing page with geometric pattern

WhenOn a dark-mode pricing or feature page where each feature card needs to stand out on a textured or dot-pattern background.
WhyThe ::before pseudo-element (top-left glare) simulates a spotlight giving each card relief without a heavy shadow. Subtle on low-contrast backgrounds, spectacular on colorful ones.
Settingsblur(24px), fill rgba(255,255,255,0.06), border rgba(255,255,255,0.12) slightly more visible, border-radius: 20px.

How it works

The core of the effect is backdrop-filter: blur(20px) on .card-glass. This GPU-driven property tells the browser to blur all content rendered behind the element in the stacking context — unlike filter: blur(), which would apply to the element itself. For the result to be noticeable, the background scene must be sufficiently colorful or contrasted.

The semi-transparent fill background: rgba(255,255,255,0.05) lets the blurred color show through, while border: 1px solid rgba(255,255,255,0.1) draws the frosted outline. The 30%-opacity box-shadow creates the depth that lifts the card away from its background without overwhelming the blur.

The .card-glass::before pseudo-element adds a diagonal light glare: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 50%). It covers the top-left quadrant only, simulating a glass surface tilted toward a front light source. pointer-events: none ensures it captures no clicks; border-radius: inherit makes it follow the parent's corner radius.

position: relative on .card-demo is mandatory: it creates the positioning context for the ::before pseudo-element. The demo background .demo-preview.glass-bg provides the purple-fuchsia gradient — in production, replace it with any colorful background, image, or video.

Accessibility

  • prefers-reduced-motion: not applicable — the effect is entirely static; no animation or transition is defined in the provided code.
  • No aria-* attributes or role are present in the effect's HTML. If the card is decorative, add aria-hidden="true"; if interactive, add role="button" and tabindex="0".
  • Text contrast depends on the content rendered behind the card, which varies at runtime — use a text color guaranteeing ≥ 4.5:1 (WCAG AA) in the worst-case background scenario.
  • The cursor: pointer inherited from .card-demo implies a clickable element — remove it or add a keyboard handler (Enter/Space) if the card is genuinely interactive.
  • backdrop-filter is not rendered in forced-colors mode (Windows High Contrast): provide a solid fallback background via @media (forced-colors: active) { .card-glass { background: ButtonFace; } }.

Browser compatibility

Requires backdrop-filter — natively supported in all modern browsers. No JavaScript dependencies.

Chrome 76+✓ Full
Firefox 103+✓ Full
Safari 9+✓ Full (webkit)
Edge 79+✓ Full
Mobile iOS✓ Full (webkit)
Android Chrome✓ Full

Without backdrop-filter (Firefox < 103 without flag, Opera Mini), the card keeps its rgba(255,255,255,0.05) fill and border — the frosted look disappears but the light transparency remains. Use @supports (backdrop-filter: blur(1px)) to apply a more opaque fallback background.

The code

Copy the three blocks into your page. No dependencies.

HTML 
<div class="glass-bg" style="width:100%;min-height:300px;">
  <div class="card-demo card-glass">
    Glass
  </div>
</div>
CSS 
.card-demo  {
   width: 280px;
   height: 180px;
   background: var(--bg-card);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   position: relative;
   cursor: pointer;
   }

.card-glass  {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px;
   }

.card-glass::before  {
   content: "";
   position: absolute;
   inset: 0px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
   border-radius: inherit;
   pointer-events: none;
   }

.glass-bg  {
   background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 50%, rgb(240, 147, 251) 100%);
   }

/* Variables du design system du site, dont ce code depend. Sans elles,
   l'acheteur obtenait des coins carres et des couleurs par defaut (revue Owen).
   Valeurs reprises de css/style.css — a adapter librement. */
.glass-bg {
  --bg-card: #12121a;
  --radius-xl: 1rem;
}
JavaScript (fx-0129) 
// Effet CSS pur — pas de JavaScript nécessaire

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
backdrop-filter: blur(20px) 20px Blur amount in px in .card-glass — 10px for a subtle effect, 40px for a heavily frosted thick glass.
background: rgba(255,255,255,0.05) in .card-glass 0.05 Fill opacity — increase to 0.08–0.15 for better readability on light or low-contrast backgrounds.
border: 1px solid rgba(255,255,255,0.1) in .card-glass 0.1 Frosted outline visibility — raise to 0.2 for a stronger edge, lower to 0.05 to make it nearly invisible.
box-shadow: rgba(0,0,0,0.3) 0px 8px 32px in .card-glass 0.3 / 8px Depth and spread of the drop shadow — increase opacity and blur-radius to push the card further from its background.
rgba(255,255,255,0.1) in .card-glass::before 0.1 Top-left diagonal glare intensity — raise to 0.18 for a shinier look, reduce to 0.03 to nearly suppress it.
linear-gradient(135deg) in .card-glass::before 135deg Glare angle — 135° = light from top-left. 45° = bottom-right glare, 90° = right-side glare.
border-radius in .card-demo var(--radius-xl) Corner radius — replace with a px value (e.g. 16px, 24px) if the project CSS variable is not defined.

FAQ

Is backdrop-filter supported in all modern browsers?

backdrop-filter is natively supported since Chrome 76, Edge 79, Safari 9 (with the -webkit- prefix) and Firefox 103. For older Firefox (< 103 without a flag), use @supports (backdrop-filter: blur(1px)) { .card-glass { backdrop-filter: blur(20px); } } and set a more opaque background (rgba(0,0,0,0.55)) outside the @supports block.

Is the effect visible on any background?

No — backdrop-filter: blur() is only noticeable when the content behind the card is sufficiently colorful or contrasted. On a white or barely contrasted background, the blur will be almost invisible. The effect peaks on vivid gradients, images, or animated backgrounds (video, canvas).

How do I stack multiple glass cards without cumulative blur artifacts?

Each element with backdrop-filter creates its own stacking context and blurs everything behind it in the render order — including other glass cards. To avoid stacking blur, prevent card overlap, or give one card a slightly more opaque background (rgba(0,0,0,0.4)) to mask the underlying blur.