Toolis.dev

Glassmorphism Generator

Visual glassmorphism builder. Tune blur, tint, saturation, border, and radius — preview on light, dark, or photo backgrounds — copy CSS, Tailwind, or JSX.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use Glassmorphism Generator

  1. Pick a preview background — light, dark, or a photo.

  2. Tune blur, tint opacity, saturation, and border.

  3. Adjust the radius for the card shape.

  4. Copy CSS, Tailwind, or JSX output.

When to use it

  • Hero card over a photo background.

  • Login form over a gradient.

  • Sidebar / nav with frosted feel.

  • Modal overlay with a frosted backdrop.

What it fixes

  • Forgetting the `-webkit-backdrop-filter` for Safari.

  • Guessing opacity that doesn't kill legibility.

  • Tuning the border alpha by hand.

About Glassmorphism Generator

Glassmorphism looks effortless in mocks and brittle in code. The blur needs busy content behind it, the tint has to balance with that content, and Safari still needs the `-webkit-` prefix.

This tool gives you live preview on three backgrounds — light, dark, and a photo — so you can see how the glass behaves before you ship. Output includes both `backdrop-filter` and the `-webkit-` prefix, plus a soft white border at the opacity you set. Zero deps, everything renders in your browser.

References: MDN — backdrop-filter · Can I use — backdrop-filter

Frequently asked

  • What is glassmorphism?

    A frosted-glass UI style built with `backdrop-filter: blur()` plus a semi-transparent background and a soft white border. Popularized by macOS Big Sur and Windows 11.

  • Why two backdrop-filter declarations?

    Safari still needs the `-webkit-` prefix. Shipping both keeps Chrome, Edge, Firefox, and Safari all rendering the effect.

  • Does Firefox support backdrop-filter?

    Yes, since Firefox 103 (mid-2022). Older versions degrade to the semi-transparent background only — still readable, just without the blur.

  • Why does the glass look opaque on a plain background?

    Glassmorphism needs visual noise behind it — gradient, photo, or content — for the blur to be visible. Use the image or gradient preview to see the real effect.

  • Is the Tailwind output v3 or v4?

    Both. Arbitrary-value classes like `backdrop-blur-[16px]` work in v3 and v4. No plugin required.

Discussion

All tools