What is the ideal blur value for glassmorphism?

Blur values between 8px and 20px create the most natural glass appearance. Values below 5px look too sharp. Values above 30px can look heavy. 10–16px is a common sweet spot.

Glassmorphism Effect Generator

Create stunning glass-like UI effects with backdrop-filter, blur and transparency.

backdrop-filterLive previewSafari -webkit-

① Adjust blur & opacity ② Pick glass color & border ③ Copy the CSS

Glassmorphism

backdrop-filter: blur(12px)

Presets:

Blur (px)

12px

Background opacity

18%

Saturation

180%

Border opacity

30%

Border radius (px)

16px

Glass color

Border color

CSS Code

.glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
}

What is Glassmorphism?

Glassmorphism is a UI design trend that creates a frosted glass-like appearance using CSS backdrop-filter, semi-transparent backgrounds and subtle borders. The effect gives depth and hierarchy to interfaces while keeping them light and airy. Key CSS properties: backdrop-filter: blur(12px) saturate(180%) blurs and enhances the content behind the glass panel. background: rgba(255,255,255,0.18) sets the translucent fill. border: 1px solid rgba(255,255,255,0.3) adds the characteristic glass edge. Browser support requires -webkit-backdrop-filter for Safari. Always include a @supports fallback with a solid semi-opaque background for older browsers.

Frequently Asked Questions

Glassmorphism is a UI design style that simulates frosted glass using CSS backdrop-filter with blur, semi-transparent colored backgrounds, and thin translucent borders. It creates depth and hierarchy in interface design.

The core properties are: backdrop-filter: blur(10px) — blurs content behind the element. background: rgba(255,255,255,0.15) — semi-transparent background. border: 1px solid rgba(255,255,255,0.3) — translucent border. border-radius for rounded corners.

backdrop-filter is supported in Chrome, Firefox 103+, Edge, and Safari (with -webkit- prefix). For maximum compatibility, always include both -webkit-backdrop-filter and backdrop-filter. Firefox supported it only from version 103 (2022).

Use @supports to detect backdrop-filter support and provide a solid background fallback: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }. This ensures readability even without the blur effect.

Glassmorphism requires content or an image BEHIND the glass element for the blur to be visible. On a plain solid background, there is nothing to blur. Place the glass element over an image, gradient, or other colorful content to see the effect.

Blur values between 8px and 20px create the most natural glass appearance. Values below 5px look too sharp (more like tint than glass). Values above 30px can look heavy and obscure the background too much. 10–16px is a common sweet spot.

Add box-shadow to enhance the glass depth: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Use multiple box-shadows for more complex lighting — an inner light highlight: inset 0 1px 0 rgba(255,255,255,0.5) combined with an outer shadow creates a convincing glass panel effect.

Glassmorphism

What is Glassmorphism?

Frequently Asked Questions

Explore Our Network