← All toolsFree — no signup

Glassmorphism Generator

Adjust blur, transparency, and colour to generate a glassmorphism effect with a preview over a gradient.

Glassmorphism Generator

Blur: 12px

Background opacity: 20%

Glass tint

Border opacity: 30%

Saturation: 180%

Preview

CSS Output

.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

Loading tool…

How it works

Adjust blur, transparency, and colour

Preview it over a gradient

Copy the backdrop-filter CSS

Need a custom tool built into your product?

We build calculators, estimators, and AI-powered tools that convert visitors into leads.

Start a project