Home / Design Tools / Glassmorphism Generator

Glassmorphism Generator

Frosted-glass card CSS with blur, opacity and radius controls.

How to use

  1. Tune blur, opacity and radius on the live card.
  2. Check it over the colorful demo background.
  3. Copy the CSS.

Frequently asked questions

Why doesn't it work on my site?

backdrop-filter needs something behind the element to blur - it shows on layered content, not plain backgrounds.

Related tools

  • Neumorphism Generator — Soft-UI shadows with raised and pressed variants.
  • CSS Shadow Generator — Craft box-shadows visually - offset, blur, spread, opacity.
  • CSS Border Radius Generator — Per-corner border radius with live preview - including organic blob shapes.
  • CSS Clip Path Generator — Ready-made clip-path shapes - triangle, hexagon, star, arrow and more.
  • SVG Optimizer — Shrink SVG files with SVGO - same engine as build tools.
  • Icon Generator — One image → every iOS, Android and web app icon size, zipped.

See all design tools