FreeDev Tools

Glassmorphism Generator

Frosted-glass card CSS — backdrop blur, transparency, and border tuned live.

Glass card
.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Tune blur and opacity

    Backdrop blur, glass and border opacity, radius, saturation.

  2. 2

    Judge on the gradient

    The preview sits on a vivid background so the frosting shows.

  3. 3

    Copy the CSS

    Includes the -webkit- prefix Safari needs.

Frequently Asked Questions

The frosted-glass UI style: translucent panels that blur whatever is behind them, defined by backdrop-filter: blur() plus a semi-transparent white background and subtle border — popularized by macOS and iOS.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually