The Complete Glassmorphism CSS Guide

What is Glassmorphism?

Glassmorphism is a UI design trend that simulates the appearance of frosted or tinted glass. Elements appear translucent with a blurred background visible through them, combined with a subtle border on the top and left edges that catches the "light". The effect was popularised by Apple's macOS Big Sur in 2020 and became one of the defining visual styles of the early 2020s.

The effect is built entirely in CSS using three properties working together: backdrop-filter to blur whatever is behind the element, background with an rgba colour for the tint and transparency, and border with a semi-transparent white to create the glass rim. Without all three, the effect falls flat.

The Core CSS

Here is the minimal glassmorphism implementation that works in all modern browsers:

.glass-card {
  /* The blur — the defining property */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */

  /* Semi-transparent tinted background */
  background: rgba(255, 255, 255, 0.12);

  /* Glass rim — light-catching border */
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* Round the corners */
  border-radius: 16px;

  /* Subtle shadow for depth */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Padding for content */
  padding: 24px;
}

Choosing the Right Background

The background behind a glass card defines how well the effect reads. These guidelines will help you get consistent results:

• High contrast backgrounds work best — a multi-colour gradient with distinct hue shifts creates clear blur differentiation that sells the glass effect.
• Low contrast, flat backgrounds make it invisible — a single-colour background blurs into the same colour, making the card look like a plain semi-transparent rectangle.
• Photography works well — images with natural depth and colour variation give backdrop-filter something interesting to blur.
• Other UI elements behind the card add realism — blurring text, shapes, or other cards creates the most convincing glass appearance.

/* Ideal background — multi-stop gradient */
.page-bg {
  background: linear-gradient(
    135deg,
    #7c6fff 0%,
    #c56fff 40%,
    #ff6fb0 100%
  );
  min-height: 100vh;
}

/* Or radial gradient for depth */
.page-bg {
  background:
    radial-gradient(circle at 30% 40%, rgba(124,111,255,0.8), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,111,176,0.6), transparent 60%),
    #0a0a1a;
}

Light and Dark Glass Variants

The tint colour determines whether the card reads as light glass or dark glass. Adjust the rgba values to match your design system:

/* Light glass — works on dark or colourful backgrounds */
.glass-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Dark glass — works on light or photographic backgrounds */
.glass-dark {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Tinted glass — brand colour as tint */
.glass-tinted {
  background: rgba(124, 111, 255, 0.18);
  border: 1px solid rgba(124, 111, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

Borders and the Glass Rim Effect

The border is what gives glassmorphism its glass-like quality. In physical glass, light catches the rim of the material, creating a bright edge on two sides. You can simulate this in CSS by combining a semi-transparent border with an inset box-shadow:

/* Simple rim */
.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Advanced rim with inset highlight */
.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),  /* top edge highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.15);  /* left edge highlight */
}

/* Gradient border for extra polish */
.glass-gradient-border {
  position: relative;
  border: none;
  background-clip: padding-box;
}
.glass-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.3),
    rgba(255,255,255,0.05)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Choosing the Right Blur Intensity

The blur radius is the single most important glassmorphism parameter. Too little and the glass looks dirty; too much and it looks opaque. Here are the ranges for different use cases:

• 4–8px — subtle tint with visible background. Use for overlapping UI elements, tooltips, sticky navbars.
• 10–16px — the classic glass look. Background is recognisably blurred but still colourful. Use for cards, modals, panels.
• 20–30px — heavy blur. Background colours bleed through but detail is lost. Use for high-emphasis overlays or when you want maximum visual weight.
• Above 40px — effectively opaque. The card absorbs so much background colour it looks nearly solid. Rarely useful for glassmorphism.

Accessibility Considerations

Glassmorphism can create accessibility challenges because the blurred background makes it harder to judge text contrast. Always check your text contrast ratio against the glass card, not the background behind it:

• Use WCAG AA minimum of 4.5:1 contrast ratio for body text (use our colour contrast checker technique).
• White text on a semi-transparent white card may fail — test with both light and dark backgrounds.
• Avoid putting glass cards over backgrounds that contain text or fine detail that users need to read through the card.
• Test at high contrast system settings — some users run their OS in high contrast mode, which removes backdrop-filter effects entirely.

Browser Support

backdrop-filter is supported in all modern browsers. The -webkit-backdrop-filter prefix is still needed for older Safari (iOS 15 and below). You can provide a fallback for browsers that do not support it using @supports:

/* Always include the -webkit- prefix for Safari */
.glass-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.12);
}

/* Fallback for unsupported browsers */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(20, 20, 40, 0.85); /* opaque fallback */
  }
}