buncha/code & dev/css-glassmorphism

CSS Glassmorphism Generator

The glassmorphism look — a frosted-glass panel over a colourful background — uses backdrop-filter: blur(...), a translucent tint, and a faint border. The preview below renders against your chosen background gradient.

Background gradient (preview only)

Frosted Glass

This panel is rendered with backdrop-filter blur, a tint over the gradient behind it, and a faint inset border. Drag the sliders to tune the look.

Blur — 16px

Tint opacity — 0.25

Saturation — 180%

Border opacity — 0.30

Border radius — 20px

Tint

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

The element needs a coloured or image background visible behind it for the effect to show. Safari needs the -webkit-backdrop-filter prefix; Firefox supports it from version 103+.

Live CSS preview — runs entirely in your browser.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About CSS Glassmorphism Generator

Build the frosted-glass / glassmorphism panel look with live preview. Tune blur, opacity, saturation, tint, border, and radius; copy the ready-to-paste CSS with the -webkit- prefix.

Everything happens on your device. Close the tab and it's gone.