Generate glassmorphism

Create a translucent CSS panel that blurs rendered content behind it.

freeworks offlinenothing uploaded
ToolGlassmorphism Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The supplied hex colour becomes red, green, and blue channels in an rgba background, while backdrop-filter applies a pixel blur behind the element. A translucent border, radius, and prefixed fallback declaration complete the class.

  • Opacity, blur, and radius remain explicit because the visible result depends on its background.
  • The WebKit-prefixed declaration accompanies the standard property for compatibility.

Worked example

Generate glassmorphism
Input
											Color: #ffffff
Opacity: 0.2
Blur px: 16
Radius px: 20
Output
												.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

When to use this

Photo-backed modals retain context, dashboard cards separate controls from colour, and translucent navigation overlays moving content.

Edge cases

  • Against a flat opaque backdrop, blur can be visually indistinguishable.
  • Zero colour opacity still leaves backdrop blur and the border enabled.
  • Support, compositing cost, text contrast, and fallback appearance need testing in the actual target browser and layout.

References