Free tool

Glassmorphism Generator

Create frosted-glass cards (blur + transparency) with a live preview. Tweak every parameter and copy ready-to-use CSS.

Border
Shadow

Glassmorphism

Live preview over your background.

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

The glassmorphism generator produces the CSS for the popular frosted-glass effect: a semi-transparent surface that blurs whatever sits behind it using backdrop-filter. The style became famous with macOS Big Sur and Windows 11 and is still one of the most used resources in modern interfaces. The tool lets you adjust background opacity, blur intensity, corner radius, the subtle border that creates the luminous finish and the outer shadow. The preview updates instantly over several sample backgrounds so you can check the contrast before copying the code.

Features

  • ✓Live preview over real backgrounds
  • ✓Opacity, blur, radius, border and shadow control
  • ✓Output includes the -webkit- prefix
  • ✓5 sample backgrounds to test contrast
  • ✓100% in browser, no sign-up

How to generate a glassmorphism effect?

  1. 1

    Pick a test background

    Switch between the 5 backgrounds to see how contrast changes.

  2. 2

    Tune the values

    Opacity, blur, radius, border and shadow with the sliders.

  3. 3

    Check the preview

    The right panel shows the exact result in real time.

  4. 4

    Copy the CSS

    Paste the .glass class into your stylesheet and apply it anywhere.

Frequently asked questions

Why doesn't my effect show up in some browsers?

The backdrop-filter property requires modern browsers. The generated code includes the -webkit-backdrop-filter prefix for Safari; if you need very old browsers, add a more opaque fallback background using @supports.

Does blur affect performance?

A large-radius backdrop-filter forces the browser to recomposite layers constantly. On pages with heavy scrolling or many glass elements, limit the blurred area or lower the blur value.

Is anything uploaded to a server?

No, the code is generated by combining your options directly in your browser.

Related tools

CSS Gradient Generator

Linear, radial and conic gradients with presets.

Neumorphism Generator

Soft UI with dual shadow and light angle.

Color Palettes

Harmonic color combinations.

CSS Box Shadow Generator

CSS shadows with multiple layers and live preview.

Embed Glassmorphism Generator on your site

Add Glassmorphism Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/glassmorphism-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Glassmorphism Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub