glassmorphism generator — free browser tool | fatcousin

home

build glass morphism UI · backdrop blur · transparency · border · live preview · copy CSS

background

dark text

preview

glass card

backdrop-filter: blur(12px)

transparent · blurred · elegant

glass properties

bg colorborder color

blur12px

saturation180%

bg opacity15%

border opacity30%

border width1px

border radius16px

shadow blur24px

shadow opacity20%

css output

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