Design Tools

CSS Glassmorphism Generator

Generate glassmorphism CSS with live preview.

Customize Effect

12px
0px40px
10%
0%50%
15%
0%50%
16px
0px48px

Glass Preview

Frosted glass effect

.glass-element {
  background: rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

How to Use the CSS Glassmorphism Generator

  1. Adjust blur, background opacity, border opacity, and border radius sliders.
  2. See the glass effect update in the live preview panel.
  3. Copy the generated CSS with one click.
  4. Use Advanced Options for custom background color and shadow intensity.

Examples & Reference

Glassmorphism CSS: backdrop-filter: blur(Npx); background: rgba(R,G,B,opacity); border: 1px solid rgba(255,255,255,borderOpacity); box-shadow for depth.

Frequently Asked Questions

Glassmorphism is a UI trend using frosted-glass effects via backdrop-filter blur, semi-transparent backgrounds, and subtle borders.