Snippets /

Modern glassmorphism

Frosted glass cards with backdrop-filter and oklch() — no JavaScript.

Widely supported
coloruino-js

Quick implementation

.glass-card {
  /* Semi-transparent fill in OKLCH */
  background: oklch(1 0 0 / 0.15);

  /* The blur — add webkit prefix for Safari */
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);

  /* Subtle white border to reinforce the glass edge */
  border: 1px solid oklch(1 0 0 / 0.28);
  border-radius: 1rem;

  /* Depth */
  box-shadow:
    0 8px 32px oklch(0 0 0 / 0.18),
    inset 0 1px 0 oklch(1 0 0 / 0.2);

  padding: 1.25rem 1.5rem;
}

/* Needs a colorful or image background behind it to show the effect */
.glass-scene {
  background: linear-gradient(135deg, oklch(0.5 0.18 280), oklch(0.42 0.2 310));
}

Prompt this to your LLM

Crafted prompt — includes role, intent, constraints, framework variant, and edge cases.

You are a senior frontend engineer specializing in modern CSS.

Goal: Build a glassmorphism card component — frosted-glass look over a colorful background.

Technical constraints:
- Use backdrop-filter: blur() with the -webkit- prefix for Safari support.
- Use oklch() for all colors (background overlay, border, shadow alpha) instead of rgba().
- The card background should be white at ~15% opacity: oklch(1 0 0 / 0.15).
- Add a thin border in white/translucent: oklch(1 0 0 / 0.25) to define the glass edge.
- Include a box-shadow for depth (ambient + inset highlight).

Framework variant (pick one):
A) Vanilla HTML/CSS only — return a .glass-card class and a .glass-scene wrapper.
B) React component — accept `children`, `className` props; include the CSS as a CSS module.

Edge cases to handle:
- Provide a @media (prefers-reduced-motion: reduce) fallback that removes the blur and uses a solid background instead (e.g. oklch(0.2 0.02 265 / 0.9)).
- Mention what happens when backdrop-filter is not supported (solid fallback via @supports).

Return the HTML structure and the CSS, clearly separated.

Why this matters in 2026

Glassmorphism graduated from trend to stable UI pattern. backdrop-filter is now supported everywhere, so the old "solid color fallback for Firefox" workarounds can go. The real upgrade is switching from rgba() to oklch(): oklch gives you perceptually consistent alpha values, so the card looks correct in both light and dark modes without extra overrides.

Combine with box-shadow for depth and an inset highlight on the top edge and you have a convincing frosted-glass surface in under 10 lines.

The logic

backdrop-filter: blur() renders a blurred composite of whatever is visually behind the element. The card's semi-transparent background (oklch(1 0 0 / 0.15)) lets that blurred backdrop show through. The border in white/alpha defines the edge — without it the card looks like a fuzzy box.

Why oklch for colors? oklch(1 0 0 / 0.15) is white at 15% opacity in a perceptually uniform space. In contrast, rgba(255,255,255,0.15) shifts appearance slightly between display color profiles. OKLCH stays consistent.

inset shadow: inset 0 1px 0 oklch(1 0 0 / 0.2) mimics the way light catches the top lip of glass — a small detail that reads as polish.

Accessibility & performance

Text on glass must pass contrast ratios. Use a background that provides enough contrast — don't overlay dark text on a dark gradient. Prefer backdrop-filter over JS-blur for performance: the browser composites it on the GPU. On low-end devices, blur is expensive; wrap it in @supports (backdrop-filter: blur(1px)) and provide a high-opacity solid fallback.

Reduce-motion tip: @media (prefers-reduced-motion: reduce) { .glass-card { backdrop-filter: none; background: oklch(0.2 0.02 265 / 0.9); } }