Glass card

Quick implementation

.glass-card {
  background: oklch(1 0 0 / 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 8px 32px oklch(0.15 0 0 / 0.25);
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to create a glass card.

Create a glassmorphism card with CSS. Use a semi-transparent
background with oklch(1 0 0 / 0.12), backdrop-filter: blur(16px)
(include the -webkit- prefix), a subtle white border at 20% opacity,
1rem border-radius, 2rem padding, and a soft box-shadow using
oklch(0.15 0 0 / 0.25). The card should sit on a vibrant gradient
background to show the blur effect clearly. Use oklch() for all colors.

Why this matters

Glassmorphism creates visual depth and hierarchy without heavy drop shadows or opaque backgrounds. The blurred backdrop lets underlying content show through, conveying layers. It is widely used in modern UI design — from macOS and iOS to web dashboards and landing pages. With backdrop-filter now supported in all major browsers, it is production-ready.

The logic

backdrop-filter: blur(16px) applies a Gaussian blur to everything behind the element. The semi-transparent background tints the blurred area. The border at low opacity adds a subtle frosted edge that catches light. The box-shadow adds depth separation. Higher blur values create a more opaque frosted look; lower values let more detail through. The effect only works when there is visible content behind the element — on a plain white page it just looks like a card with a border.

Accessibility & performance

Ensure text on the glass card has sufficient contrast against the blurred background. Test with different background content — a bright image behind white text may drop below WCAG contrast ratios. backdrop-filter creates a compositing layer, which uses GPU memory. Avoid stacking many glass elements or applying it to large areas on low-end devices. A single card-sized glass element has negligible performance impact on modern hardware.