What Is Glassmorphism?

Glassmorphism is a UI design style that simulates frosted glass — elements appear translucent with a blurred version of whatever is behind them showing through. The effect became mainstream after Apple adopted it across macOS and iOS, and it has since become one of the most popular visual styles for dashboards, cards, modals, and navigation bars in modern web design.

The effect requires three key CSS properties working together: backgroundwith a semi-transparent color (using rgba), backdrop-filter: blur() to blur the content behind the element, and a subtle border with low opacity to define the glass edge.

The CSS Behind Glassmorphism

A typical glassmorphism card uses this combination:

.glass-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

The -webkit-backdrop-filter prefix is required for Safari. Without it, the blur effect will not work on iOS or macOS Safari, which together represent a significant share of web traffic.

Browser Support and Performance

backdrop-filter is supported in all modern browsers — Chrome, Edge, Firefox, and Safari. However, heavy use of backdrop blur can impact rendering performance, especially on lower-powered mobile devices. Use it selectively on a few key elements rather than applying it to everything on the page.

Always test glassmorphism effects with a colorful or patterned background behind the element — the effect only shows when there is visible content to blur through. On solid color backgrounds it appears as plain transparency.