Glass button

Frosted-glass button — backdrop-filter blur with a translucent background.

Widely Supported

colorglassno-js

Quick implementation

.glass-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 0.5rem;
  background: oklch(1 0 0 / 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid oklch(1 0 0 / 0.18);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.glass-btn:hover {
  background: oklch(1 0 0 / 0.2);
  border-color: oklch(1 0 0 / 0.3);
}

.glass-btn:focus-visible {
  outline: 2px solid oklch(0.72 0.19 265);
  outline-offset: 2px;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a design system.

Goal: A frosted-glass button using backdrop-filter — no JavaScript.

Technical constraints:
- Use backdrop-filter: blur(10px) with -webkit- prefix for Safari.
- Semi-transparent background: oklch(1 0 0 / 0.12) for the glass tint.
- Subtle border: oklch(1 0 0 / 0.18) for the glass edge.
- Hover: increase background and border opacity.
- Include :focus-visible outline for keyboard accessibility.
- Use oklch() for all colors, not hex or rgba().

Framework variant (pick one):
A) Vanilla CSS class for any <button> or <a> element.
B) React component — accept variant ("light" | "dark") and size props.

Edge cases to handle:
- Button must be placed over a colorful or image background to see the glass effect.
- Safari requires -webkit-backdrop-filter.
- Ensure text contrast against the blurred background meets WCAG AA.
- Dark glass variant: use oklch(0 0 0 / 0.3) instead of white-based values.

Return CSS.

Why this matters in 2026

Glass buttons are the signature UI element of glass-morphism design — used in hero sections, overlays, and media-rich interfaces. backdrop-filter makes the frosted effect possible with pure CSS, replacing what previously required canvas or SVG filters.

The logic

The button's background is white at 12% opacity, creating a faint tint. backdrop-filter: blur(10px) blurs everything behind the element, creating the frosted glass illusion. The border at 18% opacity simulates the subtle light refraction at the edge of glass. On hover, both opacities increase slightly, making the button feel more "solid."

Accessibility & performance

Ensure white text on the glass surface meets WCAG AA contrast. The semi-transparent background plus blur usually provides enough contrast, but test against varied backgrounds. backdrop-filter is GPU-composited and performant. Always include a :focus-visible outline — the glass effect can obscure default focus rings.