Glassmorphism CSS

Gere em tempo real o código de desfoque de fundo e borda translúcida.

Configurações do efeito

Cor do vidro

#FFFFFF

Opacidade do fundo15%

Desfoque do fundo10px

Saturação180%

Opacidade da borda30%

Raio da borda16px

Opacidade da sombra10%

Fundo da prévia

Prévia ao vivo

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Dicas

Melhores resultados: opacidade de 10–25%, desfoque de 5–15 px
O prefixo -webkit-backdrop-filter está incluído para compatibilidade com o Safari
Se o efeito parecer opaco, garanta que o elemento pai tenha um fundo colorido
Uma saturação de 180% mantém as cores atrás do vidro vibrantes

CSS E DESIGN SEMELHANTES

Ver todas

Código para imagem

Transforme trechos de código em capturas de tela bonitas.

Abrir →

Gerador de gradientes CSS

Crie gradientes lineares, radiais e cônicos e copie o CSS na hora.

Abrir →

Gerador de box-shadow

💬 Comentários

Ainda não há comentários. Seja o primeiro!

O QUE É Glassmorphism CSS?

Ajuste opacidade, desfoque, saturação e borda para visualizar em tempo real um cartão de vidro fosco e depois copie o CSS, incluindo backdrop-filter.

Como usar?

O painel esquerdo tem 7 controles: opacidade, desfoque, saturação, opacidade da borda, raio da borda, sombra e seletor de cor — todos atualizam o cartão de prévia na hora.
Melhores resultados: opacidade de 10–25% e desfoque de 5–15px. Esses dois parâmetros têm o maior impacto no visual de vidro fosco.
Aumente a saturação para 180% para cores vibrantes atrás do vidro; a opacidade da borda acrescenta uma sutil borda de destaque ao cartão.
Clique nas 6 amostras de fundo (Roxo, Oceano, Pôr do sol etc.) para testar o efeito de vidro sobre diferentes gradientes.
Clique em “Copiar CSS” para obter código pronto para produção com backdrop-filter e -webkit-backdrop-filter (compatível com Safari).

Perguntas frequentes

Como o efeito glassmorphism é obtido?

Com backdrop-filter: blur() para desfocar o fundo, uma background-color semitransparente e uma borda sutil.

Ele funciona em todos os navegadores?

Tem bom suporte no Chrome, Edge e Safari. O Firefox precisa de uma flag experimental. Adicione o prefixo -webkit- por segurança.

Posso visualizar em tempo real?

Sim. Qualquer ajuste em um controle deslizante ou cor atualiza a prévia na hora.