Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Frosted

The glass effect previews live.

Tune blur, opacity, and saturation below.

Backdrop
Blur14px
Opacity60%
Saturation140%
Border20%
Radius20px
Tint
CSS
background: rgba(255, 255, 255, 0.60);
backdrop-filter: blur(14px) saturate(1.40);
-webkit-backdrop-filter: blur(14px) saturate(1.40);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 20px;
Tailwind
bg-[rgba(255,255,255,0.60)] backdrop-blur-[14px] backdrop-saturate-[140%] border border-white/[0.20] rounded-[20px]

01 — Overview

How it works

A live workbench for glassmorphism. Adjust backdrop blur, background opacity, saturation, border, and corner radius and see the result on a sample card over a colorful backdrop. Export as CSS or Tailwind classes.

02 — Use cases

When to use it

  1. 01

    Build a glass nav bar that floats over a hero image

  2. 02

    Get the right blur amount for a frosted modal backdrop

  3. 03

    Translate a Figma glass card into production-ready CSS

  4. 04

    Test how a glass treatment reads in light and dark mode

03 — Examples

Real input, real output

blur 12px, opacity 60%, saturation 140%

ex 01

background: rgba(255,255,255,0.6); backdrop-filter: blur(12px) saturate(1.4);

A typical glass card surface.

tinted glass over dark hero

ex 02

background: rgba(20,20,30,0.5); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255,255,255,0.08);

Darker glass with a hairline highlight border for a clear edge.

04 — FAQ

Frequently asked

Most evergreen browsers support backdrop-filter, but it requires -webkit-backdrop-filter for Safari. The generated CSS includes the prefix automatically.

05 — More

Tools that pair well

CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

Color/box-shadow

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient

Color Picker & Converter

Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.

Color/color