Gerador de Glassmorphism CSS

Crie efeito de vidro fosco com CSS

Processamento no NavegadorSeus dados nunca saem do seu navegador

Glass Effect Settings

Blur16px
Transparency20%
Saturation180%
Border Radius16px
Border Width1px

Colors

Glass Tint
Border Color
Shadow Color
Text Color

Enable Shadow

Shadow Blur
Shadow Spread

Preview

Glassmorphism

A modern UI design trend that creates a frosted glass effect using backdrop filters and transparency.

Button

CSS

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

Presets

About Gerador de Glassmorphism CSS

Crie efeito de vidro fosco com CSS

Use this free online geradores css tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.